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:

<p style="clear: both;">

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.
All photos from my trip to Gunnison, Colorado. | Source

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:

<p style="float: left; font-size: 9pt; text-align: center; width: 30%; margin-right: 1%; margin-bottom: 0.5em;"><img src="imageLocation" style="width: 100%">Caption</p>

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:

<p style="clear: both;">

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 the image 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 to height 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 <p style="clear: both;"> 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.

Unfortunately, I've had trouble making this work with captions.

© 2011 Ellen Brundige

More by this Author

Guestbook—Thanks for Dropping By 122 comments

SandyPeaks 5 years ago

Thanks for a helpful and detailed explanation!

SquidJigger 5 years ago

Very useful stuff here. I knew some HTML, but not enough to do what I wanted. Just copied the code from here and plugged in my url's, and voila! Two images side by side with captions nicely centered beneath. Thanks, GreekGeek!

John Dyhouse profile image

John Dyhouse 5 years ago from UK

THanks for this code, I think I will be using this soon, I have lots of ijages I would like to feature but up until I saw this trick I was afrid to put in too many images on a page.

serenity4me lm profile image

serenity4me lm 5 years ago

I love all of your awesome Squidoo Lens (s)! You offer up so much information to help others like me.

PedroMorales1 profile image

PedroMorales1 5 years ago

thanks for your help!

BlueStarling profile image

BlueStarling 5 years ago

Another terrific "how-to" lens & and exactly what I was looking for. Thanks!

MariaMontgomery profile image

MariaMontgomery 5 years ago from Central Florida, USA

Your tutorial lenses are so very helpful. I really apreciate the effort you have made for the rest of us. I have put many of your suggestions into my lenses. I have a question, though: I have edited all of my 9 lenses multiple times, correcting mispelled words, adding graphics, photos, etc. So far, none of my changes have shown up in the published versions of my lenses. They all look they way they did the day they were published. Any suggestions on what to do?

mythphile profile image

mythphile 5 years ago from California Author

@MariaMontgomery: Scroll back up to the top of the Lens Workshop and punch that there "Publish" button again. The changes aren't "live" until you do that, just in case you're still fiddling. :)

anonymous 5 years ago

hey i have a problem. im doing the clickable links.but when im finished with it, on the main page it has the pics on it but the words,style="width: 180px; float: left; margin-bottom: 15px; margin-right: 20px;">, are also displayed. i have 4 pics and each one of them has the same thing. each of my pictures was uploaded to photobucket so don't really know what to do.

mythphile profile image

mythphile 5 years ago from California Author

@anonymous: That's the code from step 2 above (color coded yellow in my example), but it looks like you're missing the beginning of that snippet. Before each image, you should have:


That's almost what you have, but you're missing the codes. If that's so, you're stuck; try the "Making the Images Clickable Links" template above the one you were going for (no captions, but at least you'll have clickable images).

However, I'm hoping it's just a copy/paste issue and that it'll work once you try again, making sure you've got that

Gayle Dowell profile image

Gayle Dowell 5 years ago from Kansas

I've been using your code after I've attempted listing photos from other lenses. I have to say that I wasn't successful with the others. Your code worked well and was so easy to follow. Thanks so much!

LissaKlar LM profile image

LissaKlar LM 5 years ago

Thank you. This was a very helpful lens!

ChocolatteDesigns 5 years ago

Very helpful lens!! Thank you, thank you, thank you!! :-)

OOPSY LM profile image

OOPSY LM 5 years ago

Thank you so helpful!

marigoldina profile image

marigoldina 5 years ago

I'll be using this in the future!

Scarlettohairy profile image

Scarlettohairy 5 years ago from Desert Southwest, U.S.A.

Thanks! I'm still a tad lost but this is very helpful the way you explained what all the html means.

marydixon 5 years ago

You are absolutely wonderful in your generosity for sharing all this info - and you are excellent at your explanations and illustrations - your lenses on html, css, etc are as good as they get,

beckyf profile image

beckyf 5 years ago

I've been trying to figure this out for awhile now. Thank you for this helpful information!

Gayle Mclaughlin profile image

Gayle Mclaughlin 5 years ago from McLaughlin

I still don't understand--quite-- but I am reading and re-reading. Thank you for this wonderful explanation

marydixon 5 years ago

@mythphile: You are so good and patient !

anonymous 4 years ago

Thanks so much!

riyasherin lm profile image

riyasherin lm 4 years ago

Thanks For Such Useful Tips... Great Stuff!

favored profile image

favored 4 years ago from USA

Very hard, but helpful. It will take some practice I see.

nsixx99 4 years ago

So helpful, thank you so much! And double thanks for explaining how the code actually works!

Scotties-Rock profile image

Scotties-Rock 4 years ago from OREFIELD, PA

Great info, Thanks so much!

JackieSonia profile image

JackieSonia 4 years ago

Thank you for taking the time to help us noobies. Great info.

notedbybarb profile image

notedbybarb 4 years ago

What a fantastic tutorial--you really know how to code great looking pages. Many thanks for sharing this CSS tactics.

greenspirit profile image

greenspirit 4 years ago from London

just what I needed to save my lenses from weird image size and placement syndrome...a thousand thank yous

Coreena Jolene profile image

Coreena Jolene 4 years ago

I have been struggling with a template someone made all afternoon into the evening. I hope I can make it work with your instructions. This really stretches my brain. Thank you for sharing such nice detailed instructions.

anonymous 4 years ago

I have followed the instructions and they work great for three pics in a row, but I want to put four in a do I do that? I've tried a couple of different things and it all either keeps it three on a line or bumps one down so there are two on each line. Any thoughts?

mythphile profile image

mythphile 4 years ago from California Author

@anonymous: If they exceed the horizontal space available, they'll wrap around onto the next row. In my examples above I set the width of each image to 180px. Try doing a search-and-replace to change that to, say, 130px, or even 100px, and see if that fixes it.

Quirina 4 years ago

Wow, these lenses of yours are SO deserving of a purple star! Thank you for making them.

StaCslns 4 years ago

Wow, thank you! I am going to try this. I love the way you explain things!

xmen88 4 years ago

Interesting and useful.

JoyfulReviewer profile image

JoyfulReviewer 4 years ago

I've been wondering how to do this. Thank you for the helpful and thorough instructions.

cmadden 4 years ago

Thank you especially for "clear: left" - I would have made it to bed much earlier some nights if I'd found this lens before now!

gatornic15 profile image

gatornic15 4 years ago

I've been having some trouble getting side by side images the same size since the source images are different sizes. Hopefully this will help me figure it out.

magictricksdotcom profile image

magictricksdotcom 4 years ago

Thanks for the tips!

tjustleft profile image

tjustleft 4 years ago

Really good explanations! Aligning images is the reason I started learning the basics of HTML and CSS. My first try at a webpage was with a WYSIWYG editor. With it all I could get was columns of images. That just wasn't going to work so I hit the web to find how to do it myself. After that I ditched wysiwyg and started using a text editor.

Pam Irie profile image

Pam Irie 4 years ago from Land of Aloha

I'm SO EXCITED to read this helpful page. Thank you, Thank you, Thank you! :)

Spiderlily321 profile image

Spiderlily321 4 years ago

Great tips and tricks. Thank you for sharing this!

sharonbellis profile image

sharonbellis 4 years ago from Toronto, Ontario, Canada

This is great stuff, thanks!

favored profile image

favored 4 years ago from USA

I'm back again because I still can't get this. I'll keep coming back until I do. Thanks again... and again... and again...

Linda Pogue profile image

Linda Pogue 4 years ago from Missouri

Helpful information. Thanks!

patriciapeppy profile image

patriciapeppy 4 years ago

thanks so much for this valuable resource

anonymous 4 years ago

Your lenses are the most helpful on HTML codes that I have ever seen. No one that I have come across has explained it so simply, from the basics up- which is what I have been searching for for a while now. Thank you for taking the time to create such helpful and resourceful information!

lilblackdress lm profile image

lilblackdress lm 4 years ago

Very helpful. Thanks!

John Dyhouse profile image

John Dyhouse 4 years ago from UK

Love your tutorials, I somehow missed this one but it is just what I need for a new lens I am planning. -wonderfully clear instructions - blessed

Millionairemomma profile image

Millionairemomma 4 years ago

One word: amazing!

anonymous 4 years ago

Very Helpful. Your step by step is perfect. Thanks !

Lemming LM profile image

Lemming LM 4 years ago

This goes great with my lens on how to replace the lost Flickr module!

anonymous 4 years ago

I am so glad I found this page! I have been wondering about how to align images side by side, so thank you for this wonderful and clearly-explained tutorial. I think I will post a link to this on my photo-linking lens as well. Thank you again!!!!!!

delia-delia profile image

delia-delia 4 years ago

Great information...I'm looking for a code to make two columns of words...I have looked everywhere and can't seem to find it.

mythphile profile image

mythphile 4 years ago from California Author

@delia-delia: Ooch, two columns of text are surprisingly difficult to do. There's no way that I know of to define two column areas and have text flow naturally from the bottom of the left-hand to the top of the right-hand column. (I bet there's a way to do it in HTML 5, but I haven't learned it yet, and anyway I doubt it would work on Squidoo, which allows limited, old HTML only.)

One thing you CAN do is to create two paragraphs, just like the paragraphs that enclose side-by-side images, but write text in them instead of graphics. You'll have to decide how much text should go in each of the side-by-side paragraphs. Write the left-hand paragraph first, starting with

type whatever text is in the left hand column here Type column two here.

The above should work on Squidoo, whose total column width is 590 pixels (290 + a 10 pixel margin + 290). If you're not sure what width you're dealing with, you can try setting both columns to a width of 48% and the margin to 4% (CSS takes widths in pixels, ems or %).

oooMARSooo LM profile image

oooMARSooo LM 4 years ago

Awesome! Thank you so much! :)

GrimRascal profile image

GrimRascal 4 years ago from Overlord's Castle


bluebatik profile image

bluebatik 4 years ago

I saw the side-by-side images on another lens and was getting ready to figure the code out myself but you just save me a lot of time and frustration. Thanks!!

anonymous 4 years ago

insert: between 3 groups of the code made 3 rows of 3 images totalling 9 ... it took me hours and hours of trying to come back to this page and see that ! lol next time i wont rush; seem to save time just by stopping and reading lol :P

mouse1996 lm 4 years ago

I love the side by side image look. Great information to tuck away.

dahlia369 profile image

dahlia369 4 years ago

Very useful info, thank you!! :)

Sadheeskumar 4 years ago

Very useful information presented in the better way. Thanks.

iamraincrystal profile image

iamraincrystal 4 years ago from Manila Philippines

Your Squidoo tutorial lenses are such great help! I always find myself referring back to them when I forget something. I'm teaching myself the use of these codes. Good thing I like learning new stuff! Thank you so much ^_^

crafty23 profile image

crafty23 4 years ago

These are nice tips! Thank you for helping people like me who are a total noob when it comes to coding:)

LaraineRoses profile image

LaraineRoses 4 years ago from Lake Country, B.C.

I've spent a lot of time reading this lens and, "By jove, I think she's got it!" Thank you, this has certainly been an eye-opener for me. 590 was the key I was missing!

Angel blessings!

anonymous 4 years ago

great helpful lens, gee I wish my brain would take all this in quicker have bookmarked so can keep on trying.

GoAceNate LM profile image

GoAceNate LM 4 years ago

Good tips here. I love the Squidoo/ html how to lenses. Keep up the good work! Blessed.

squid2hub profile image

squid2hub 4 years ago

Great lens.. thanks for the tips

tonybonura profile image

tonybonura 4 years ago from Tickfaw, Louisiana

Thanks for the valuable tips. I will make use of some of them.


casquid profile image

casquid 4 years ago

I came straight to you for this info. Remember seeing you making a suggestion on another lens you wrote. This is helpful for a lens being written today. Thanks B.

SpiritofChristmas profile image

SpiritofChristmas 3 years ago

This is so helpful - a great time-saver. Thanks.

scottorz 3 years ago

helpful lens, thanks :)

Aquamarine18 profile image

Aquamarine18 3 years ago

Great lens, really helpful information. Thanks for sharing

Short_n_Sweet 3 years ago

I'm thinking of trying these tricks...


bztees profile image

bztees 3 years ago

Really, really very helpful! Thanks so much!

MissionBoundCre profile image

MissionBoundCre 3 years ago

I sooooooo needed this. Thank You!

juditpaton profile image

juditpaton 3 years ago from Ozun

thank you so much updating your lens for us who was not able to fix these templates after the new layout crash. As i guess you updated this great info before you fixed your lenses...

BestBuyGuy profile image

BestBuyGuy 3 years ago from Beekmantown, NY

Excellent tutorial, very useful.

patriciapeppy profile image

patriciapeppy 3 years ago

there seems to be some content missing from your lens. Are you planning on replacing it. It sure was useful,this is a great resource

NoelSphinx profile image

NoelSphinx 3 years ago from Sweden

Thanks a mil.

anitabreeze 3 years ago

I think I love you! Thanks for this lens!

DaveP2307 profile image

DaveP2307 3 years ago

That is very helpful. Just what I have been searching for. Many thanks!

morlandroger 3 years ago

Very useful article, I often struggle to get photos to line up just where I want them. Thanks

Deborah Swain profile image

Deborah Swain 3 years ago from Rome, Italy

excellent work - thanks!

shawnleeMartin profile image

shawnleeMartin 3 years ago

Thanks for the info!

OldCowboy profile image

OldCowboy 3 years ago

Making images clickable links is just in time for me... thanks.

john-stewartsr 3 years ago

It looks a little intimidating but i sure need it. I'm anxious to try it

daniel-euergaious 3 years ago

Very helpful indeed!, So helpful, I've bookmarked this! Thanks for this resource!


Judith Nazarewicz profile image

Judith Nazarewicz 3 years ago from Victoria, British Columbia, Canada

Really helpful information!

persistance lm profile image

persistence lm 3 years ago

Thanks, I was looking for how to do this Multiple Image Photo Gallery With Captions, and you solved my problem.

anonymous 3 years ago

nice job, it helped me a lot, just one question how do i set the height of an image, i have a profile that i have other users linked to but their profile pics are not all the same size, can i add something like heigth: 70px after ther width: 180px;

mythphile profile image

mythphile 3 years ago from California Author

@anonymous: Yes, you can!

That's height: 70px;

with the semicolon to separate it from what's after it. :)

anonymous 3 years ago

Very helpful, thank you :) I was starting to get very frustrated trying to get this to work. ahhhhhh, much better

pauly99 lm profile image

pauly99 lm 3 years ago

Thank you very much for the code. Now I need to put this info into a Squidoo template.

vsajewel profile image

vsajewel 3 years ago

Thanx so much!

anonymous 3 years ago

Made my day thanks a lot !

rob-hemphill profile image

rob-hemphill 3 years ago from Ireland

Your tutorials are always excellent and so useful, thanks for the info.

anonymous 3 years ago

Thank you so much!

ctrain profile image

ctrain 3 years ago

I wouldn't have been able to align my images without your lens!

anonymous 3 years ago

I do not say this often but ...OMG!!!! Thank you so much :-) you will never know how much of a time saver you are. I have been searching the web for days...and blessings I found you today:-) simply ingenuous TY GG

Javed Ur Rehman profile image

Javed Ur Rehman 2 years ago from Karachi, Pakistan

This tutorial is very nice, i love to read about web development.

susan369 2 years ago

I was looking for this information yesterday and couldn't find it. Today, I just stumbles upon it through an unrelated search via Google. Go figure! Thanks so much - this is invaluable! I was tearing my out trying to place images next to each other in one of my lenses. In the end, I went with a different solution. I'll keep your lens bookmarked for future projects!

luisding 2 years ago

2 thumbs up for this tutorial :)

carlwherman profile image

carlwherman 2 years ago

A newby; going to give it a shot; wish me luck!

Soraya 2 years ago

Thank you so much for your help, your precious advice has saved me a lot of time and energy. Great tutorial! :)

Fiorenza profile image

Fiorenza 2 years ago from UK

Glad I found this one; I will bookmark for future reference.

Nira 21 months ago

Thanks a lot for the very detailed and simple explanation. Since I don´t have any experience with coding but needed to make some adjustments to my page that was very helpful ... and I learned something. ;)

Gary Johnson 15 months ago

Thank you very much, this has been very helpful.

Aabharan Shastri 14 months ago

I think I needed this guide the most. I’m being diverted by html5 app development the most, Neither making much out of It. Thanks for this comprehensive guide. It opened up my eyes. I have habit of using html5 development in the sporadic intervals. Hence I end up wasting a lot of my time. I feel like the guide is written for me only. Thanks allot for such a great write-up!

JT 14 months ago

This is exactly what I was looking for. Very clear and very simple read for what is a difficult task for newbies. Well done!!

tramanh404 11 months ago

thank you. lucky when I found it, here's what I'm looking for

wafaa 10 months ago

Thank you .. it helped me .. it worked perfectly!! Really thanks

Kristen 10 months ago

This was easy to follow & helped SO much! Thank you!

SearchFocus profile image

SearchFocus 8 months ago from Canada

Very useful information. Great job!

RyanLester profile image

RyanLester 7 months ago from Liverpool

Just stumbled across this article and I must say - a very good read! Informative and Comprehensive explanation - well done!

Laura 6 months ago

Thanks! This was super helpful!

calvinaustins profile image

calvinaustins 4 months ago from UK

The detailing which you have mentioned related to code and other HTML domain is very much informative. This will help me in many manners while updating my blogs.

Keep sharing in detailing stuff. Worth reading..


David Firester profile image

David Firester 4 months ago from New Jersey

Thank you! This is very helpful!

AimeeAlma 4 months ago from Australia

Thank you. This really work for me.

HannahThistle 4 months ago

Thanks very much for the invaluable help. Can you suggest a way to centre a pair of side by side images?

Stuart Coltman 6 weeks ago

Thanks, been searching for ever to find a decent explanation. 6 weeks ago

Informative post - I loved the info ! Does anyone know if my company can get access to a fillable DoL LM-3 example to use ?

jennefer23stough 6 weeks ago

Informative post - I loved the info ! Does anyone know if my company can get access to a fillable DoL LM-3 example to use ?

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.

    Click to Rate This Article