How to Align Images Side By Side

 
Here's the HTML code to make side-by-side images (repace imageLocation.jpg with each graphic's URL):

<img src="imageLocation.jpg" style="width: 180px; float: left; margin-bottom: 15px; margin-right: 20px;"><img src="ImageLocation.jpg" style="width: 180px; float: left; margin-bottom: 15px; margin-right: 20px;"><img src="ImageLocation.jpg" style="width: 180px; float: left; margin-bottom: 15px;">

Here's the building blocks that make it work:

• <img src="imageLocation.jpg"> Replace imgLocation.jpg with the URL of your image. You'll need to upload it on a free image host like Picasa or Photobucket. (more help on image hosts)
  
• style= This allows you to add special "style" commands (CSS) that fine-tune the image.
  
• width: This sets the width of each image in pixels ( px)
  
• float: left; means "push it all the way to the left, and let whatever I write next fill the space next to it." If you think about it, this is how the letters in a paragraph of text behave: they tile from left to right, and when they run out of room, they flow onto the next line. float causes images to behave the same way. You can also float: right to tile from right to left.
  
• margin-right: This adds white space around each image. It's optional. You can define the same margin: on all sides, or just to one side and below as I did here.

If you want to do another row, just keep repeating the template above. When you've filled up all the available horizontal space, it tiles onto the next line just like the text in this paragraph.

TIP: All images in the row should have a margin on the right EXCEPT the far right image. The margin puts space between images. But if you add an extra margin after the final image, it could make the layout too wide; then the last image will wrap onto the next row.

If you want to make these images clickable links, use the HTML code for text links, treating the IMG tag as if it's text:

<a href="link.html"><img src="imageLocation.jpg" style="width: 180px; float: left; margin-bottom: 15px; margin-right: 20px;"></a><a href="link2.html"><img src="ImageLocation.jpg" style="width: 180px; float: left; margin-bottom: 15px; margin-right: 20px;"></a><a href="link3.html"><img src="ImageLocation.jpg" style="width: 180px; float: left; margin-bottom: 15px;"></a>

What if you want photos in your image gallery to have captions?

Buy Athena Art on Zazzle

Buy Greek 2 Me Mug

Buy Zeus T-Shirt

In this template, we'll define paragraphs as if they're rectangular zones on the page, put one image plus its caption inside each paragraph, and then tile the three paragraphs side-by-side same way we did the images above.

The key is to set the width of the containing paragraph to the exact width of the image. If the paragraph is locked at 180 pixels wide, and there's any text in it, then the text is forced to wrap at 180 pixels. That makes sure the caption is the width of the image and no more:

<span style="text-align: center; font-size: 9pt;"><p style="float: left; margin-bottom: 15px; margin-right: 20px; width: 180px;"><a href="Link1"><img src="Image1.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="Link1">Caption1</a></p><p style="float: left; margin-bottom: 15px; margin-right: 20px; width: 180px;"><a href="Link2"><img src="Image2.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="Link2">Caption2</a></p><p style="float: left; margin-bottom: 15px; width: 180px; margin-bottom: 5px;"><a href="Link3"><img src="Image3.jpg" style="width: 180px; margin-bottom: 5px;"></a><br><a href="Link3">Caption3</a></p></span>

Yikes, huh? Let's take it step by step:

1. Start with this span tag. It sets all the text small and center-aligned:
<span style="text-align: center; font-size: 9pt;">
(This span tag is optional, but I find it looks nice to have all my captions small and centered.)
NOTE: On Squidoo, use span. OFF of Squidoo, you may need div to make this work.

2. Start a new paragraph. if this is the last one on the row, REMOVE the margin-right: 20px; part:
<p style="float: left; margin-bottom: 15px; margin-right: 20px; width: 180px;">

3. If you want the image to be clickable, begin the link-code here:
<a href="Link1">

4. Place the image. Notice I added a little whitespace to the bottom so it's not bang against the caption:
<img src="Image1.jpg" style="width: 180px; margin-bottom: 5px;">

5. If you made the image clickable (step 3), close the link code:
</a>

6. I added <br> as a line break, but actually, if you set the paragraph width above, the text should wrap as needed anyway.

7. Write your caption. This is just plain text. ANYWHERE you want to have a link in the caption, just make a typical HTML link:
Here's a <a href="Link">clickable link</a>.

8. Close the paragraph:
</p>

9. Repeat steps 1-8 for each image + caption. Remember, the right-hand image in each row should NOT have margin-right (or it may take up too much horizontal space and flow onto the next row).

10. When you're done, use </span> (or </div>, if you used it above) to close the image gallery.

11. If the next paragraph after the image gallery seems to be behaving oddly, use <p style="clear: left;"> to start that paragraph. This cancels the float command, forcing the new paragraph to start on a new line instead of filling in side-by-side.

That's it!

Want to save and/or print out these instructions? Here: