How To Align Images Side-By-Side Using HTML

Use HTML and CSS to Build a Photo Gallery

In page one of this tutorial, How to Align Images in HTML, I gave you the basic codes for putting graphics on webpages. Now, here's a template to make a multi-image gallery of pictures side-by-side.

This will work on platforms like Wordpress that let you toggle "code" and input HTML directly. Note that many web publishing tools now have photo gallery widgets or other plugins that take care of this task for you, but now and then, we still find ourselves needing to hand-code.

Before We Begin: You Need Images!

Before you go any further in this tutorial, you must have images uploaded (stored) somewhere on the web, and you must be able to provide the address (URL, location) where each image is stored. There are various options for hosting images:

A blog. If you have a blog, it should have a media or image folder where you can upload those images.
Photobucket. This is the most common solution.
TinyPic is another free image host like Photobucket.

If you view your image gallery or library on the site where you've uploaded it, you'll probably see a line that tells you the image's location (the URL) where it is stored on their site. For instance, Photobucket has a box listing the image's "direct" link.

If you can't find a box like that, then right-click (control-click or Ctrl-click) an image and choose "copy image location" or "copy image URL."

Finding the URL of Your Image in Photobucket

HTML / CSS Codes to Tile Images

For every image in the gallery, use the code below, replacing "imageLocation" with the URL of a photo you've uploaded somewhere on the web (in quotation marks).

<img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;">

Repeat this chunk of code for each image, without skipping lines or spaces between the chunks. (I repeat: in each instance, you will be replacing "imageLocation" with the URL of the photo you are placing.)

IMPORTANT: After your very last image, add the following code:

That means, "Stop tiling left to right. No more floaty images. We're starting on a new line, here." Otherwise, the text below the image gallery might try to crawl up into the space to the right of it. Usually there's not enough room, but it's best to close the gate to make sure.

Explanation of codes:

img src="blah" is the placeholder for "Stick an image here. The source (location) of it is...". (Your image's URL replaces the word blah.)
style ="blah" means "And here's how I want it to display on the page." Style is also used for font colors, sizes, and anything to do with layout or appearance. (The line of code I gave you already says how you want the image to be displayed.)
float means "squeeze the picture as far to the left as it will fit; if there's not enough line, wrap around until there is room." Basically, it makes a graphic behave exactly the way a letter of text does when you type it on a computer screen.
width specifies the image's width. 30% restricts its width to 30% of the column. If you string a bunch of pictures together with float, and they're each 30% of the available space, they'll wrap around after the third image on each row.
margin-right is the whitespace to the right of each graphic. Since I don't know how wide your device's screen is, I made the margin 1%. You can play with this number if you need to.
margin-bottom is the whitespace below each graphic. Because webpages can scroll off the bottom of the page, we can't really specify vertical layout in percentages, so I cheated and specified the vertical space in ems. An em is the width of the letter m. Like percentages, ems grow and shrink depending on screen size, whereas pixels are fixed. Three pixels on a mobile phone take up a lot more screen real estate than three pixels on a large computer monitor.

To Place More Than Three Pictures Side-by-Side

What if you want to tile more than three across? Then it's time to do math. Divide 100% by the number of images you want to tile across. That gives you the width of the image AND its margin-right. Now decide how much of that amount you want to be image, and how much you want to be margin.

It's best to fold in a little extra wiggle room, just to make sure.

For example:

Three images across: 30% + 1% times 3 = 99%.
Four images across: 23% + 1% times 4 = 96%.
Five images across: 19% + 0.5% times 5 = 97.5%

Why am I bothering with wiggle room? Because I've found that some idiot browsers act like there's an invisible one-pixel-wide border around images, making images fractionally wider than what we've specified.

Example Side-by-Side Image Gallery

All photos from my trip to Gunnison, Colorado.

Making the Images Into Clickable Links

Each image can be a clickable link. Sometimes this is useful for menus!

Wrap the following code around each image's code:

<a href="URL"><img src="imageLocation" style="float: left; width: 30%; margin-right: 1%; margin-bottom: 0.5em;" ></a>

Replace "URL" with the URL of the page you want the image to link to (but keep the quotation marks). (Copy it from the Location bar at the top of your web browser while viewing that page.)

Multiple Image Photo Gallery With Captions

This Is a Little More Tricky.

What if you want each photo in your image gallery to have a caption? Well, oddly enough, in HTML code, we can say, "Treat a paragraph as a box." And then we can tile those boxes side-by-side just like we did the images in the examples above.

Inside each box can be an image plus a caption.

So, for each image and its caption, use the following chunk of code:

<img src="imageLocation" style="width: 100%">Caption

Replace the imageLocation with the URL of the image, and the Caption with any text you want. If the text is too long to fit on one line, it'll wrap around.

Repeat that code chunk for each "box" — the image plus its caption— without skipping lines between the chunks.

Finally, to close off the side-by-side image gallery, put this at the end:

Again, if you need to have more than three side-by-side images across, then divide 100% by the number of images you want in a row to get the width of theimage plus its margin-right, and then allocate most of that amount to the image's width and a little bit to the margin. But again, it's best to give it a little wiggle room (web browsers are often stupid), so maybe start with 99% instead.

And if you want to make something a clickable link, just wrap <a href="URL">[thing]</a> around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="....">

Side-by-Side Images With Captions

Further Tweaks and Tips: More Photos, Clickable Links

Again, if you want more than three side-by-side images across, then divide 100% (or maybe 99% to allow wiggle room) by the number of images you want in a row, to calculate the width of the image PLUS its margin-right. Then allocate most of that amount to the image's width and a little bit of it to the image's right-hand margin.

If you want to make something a clickable link, just wrap <a href="URL">[thing]</a>around it. [thing] can be any text in the caption, or it can be an image, in which case [thing] is <img src="...." style="...">

Images of Different Dimensions

How To Make a Gallery of Images of Different Dimensions

You may have noticed that in the rest of the examples on the page, my images are all the same dimensions. That makes it MUCH EASIER to tile them.

Obviously, sometimes you'll have images of all different dimensions, in which case you can't use width. The imperfect solution I've found is to change width toheight and then specify height with a fixed number of ems. Like so:

<img src="imageLocation" style="float: left; height: 15em; margin-right: 1%; margin-bottom: 0.5em;">

Repeat that for each image in the gallery, then, as usual, end the gallery with  to turn off side-by-side tiling.

Ems are proportional to the vertical size of the page, so they'll grow and shrink with screen size. If all your images are the same number of ems tall, they'll be the same height relative to each other.