STEMAcademiaAgriculture & FarmingHumanitiesSocial Sciences

How to Align Images Side-by-Side Using HTML

Updated on December 8, 2014

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

Source

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

Source

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

Source

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

Guestbook—Thanks for Dropping By

Submit a Comment

  • profile image

    JaySco 5 weeks ago

    Thank you very much!! This was super helpful!!

  • profile image

    Chanel B 2 months ago

    Awesome in depth explanation. This helped me edited my WordPress account. THANK YOU!

  • profile image

    Muhammad Jahangir 4 months ago

    Thank you so much for your valuable info, it really helped me alot

  • profile image

    Bharat 8 months ago

    Very good explanation.

    Thank you very much.

  • profile image

    Sanjith 9 months ago

    Useful section

  • profile image

    ahappyperson 11 months ago

    thank you sooo much, this is the only website that actually explains how to do this- you just saved me from failing my assessment. My pictures won't work though- I've tried almost everything-moving them to the same folder, writing the path,trying different pictures, etc. One picture worked then it just stopped again. Please help!

  • profile image

    jodi seymour 11 months ago

    My pictures keeping coming out of the bottom of my text box on tumblr. Is there any way that you would be able to help with that?

  • profile image

    Zoe 11 months ago

    So, so helpful!!! Thank you :-)

  • profile image

    jennefer23stough 13 months 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 ?

  • profile image

    leanna1lauber@protonmail.com 13 months 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 ?

  • profile image

    Stuart Coltman 13 months ago

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

  • profile image

    HannahThistle 16 months ago

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

  • profile image

    Telxperts 16 months ago from Australia

    Thank you. This really work for me.

    www.telxperts.com

  • David Firester profile image

    David Firester 16 months ago from New Jersey

    Thank you! This is very helpful!

  • calvinaustins profile image

    Calvin 16 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..

    Cheers!!

  • profile image

    Laura 19 months ago

    Thanks! This was super helpful!

  • RyanLester profile image

    Ryan 19 months ago from Liverpool

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

  • SearchFocus profile image

    Rodney 20 months ago from Canada

    Very useful information. Great job!

  • profile image

    Kristen 22 months ago

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

  • profile image

    wafaa 22 months ago

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

  • profile image

    tramanh404 23 months ago

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

  • profile image

    JT 2 years 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!!

  • profile image

    Aabharan Shastri 2 years 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!

  • profile image

    Gary Johnson 2 years ago

    Thank you very much, this has been very helpful.

  • profile image

    Nira 2 years 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. ;)

  • Fiorenza profile image

    Fiorenza 3 years ago from UK

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

  • profile image

    Soraya 3 years ago

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

  • carlwherman profile image

    carlwherman 3 years ago

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

  • profile image

    luisding 3 years ago

    2 thumbs up for this tutorial :)

  • profile image

    susan369 3 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!

  • Javed Ur Rehman profile image

    Javed Ur Rehman 3 years ago from Karachi, Pakistan

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

  • profile image

    anonymous 4 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

  • ctrain profile image

    ctrain 4 years ago

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

  • profile image

    anonymous 4 years ago

    Thank you so much!

  • rob-hemphill profile image

    Rob Hemphill 4 years ago from Ireland

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

  • profile image

    anonymous 4 years ago

    Made my day thanks a lot !

  • vsajewel profile image

    vsajewel 4 years ago

    Thanx so much!

  • pauly99 lm profile image

    pauly99 lm 4 years ago

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

  • profile image

    anonymous 4 years ago

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

  • mythphile profile image
    Author

    Ellen Brundige 4 years ago from California

    @anonymous: Yes, you can!

    That's height: 70px;

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

  • profile image

    anonymous 4 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;

  • persistance lm profile image

    persistance lm 4 years ago

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

  • Judith Nazarewicz profile image

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

    Really helpful information!

  • profile image

    daniel-euergaious 4 years ago

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

    Daniel

  • profile image

    john-stewartsr 4 years ago

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

  • OldCowboy profile image

    OldCowboy 4 years ago

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

  • shawnleeMartin profile image

    shawnleeMartin 4 years ago

    Thanks for the info!

  • Deborah Swain profile image

    Deborah Swain 4 years ago from Rome, Italy

    excellent work - thanks!

  • profile image

    morlandroger 4 years ago

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

  • DaveP2307 profile image

    DaveP2307 4 years ago

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

  • profile image

    anitabreeze 4 years ago

    I think I love you! Thanks for this lens!

  • NoelSphinx profile image

    NoelSphinx 4 years ago from Sweden

    Thanks a mil.

  • patriciapeppy profile image

    patriciapeppy 4 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

  • BestBuyGuy profile image

    BestBuyGuy 4 years ago from Beekmantown, NY

    Excellent tutorial, very useful.

  • juditpaton profile image

    Iudit Gherghiteanu 4 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...

  • MissionBoundCre profile image

    MissionBoundCre 4 years ago

    I sooooooo needed this. Thank You!

  • bztees profile image

    bztees 4 years ago

    Really, really very helpful! Thanks so much!

  • profile image

    Short_n_Sweet 4 years ago

    I'm thinking of trying these tricks...

    Thanks...

  • Aquamarine18 profile image

    Aquamarine18 4 years ago

    Great lens, really helpful information. Thanks for sharing

  • profile image

    scottorz 4 years ago

    helpful lens, thanks :)

  • SpiritofChristmas profile image

    SpiritofChristmas 4 years ago

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

  • 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.

  • tonybonura profile image

    Tony Bonura 5 years ago from Tickfaw, Louisiana

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

    TonyB

  • squid2hub profile image

    squid2hub 5 years ago

    Great lens.. thanks for the tips

  • GoAceNate LM profile image

    GoAceNate LM 5 years ago

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

  • profile image

    anonymous 5 years ago

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

  • LaraineRoses profile image

    Laraine Sims 5 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!

  • crafty23 profile image

    crafty23 5 years ago

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

  • iamraincrystal profile image

    Rosyel Sawali 5 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 ^_^

  • profile image

    Sadheeskumar 5 years ago

    Very useful information presented in the better way. Thanks.

  • dahlia369 profile image

    dahlia369 5 years ago

    Very useful info, thank you!! :)

  • profile image

    mouse1996 lm 5 years ago

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

  • profile image

    anonymous 5 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

  • bluebatik profile image

    bluebatik 5 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!!

  • GrimRascal profile image

    GrimRascal 5 years ago from Overlord's Castle

    thanks

  • oooMARSooo LM profile image

    oooMARSooo LM 5 years ago

    Awesome! Thank you so much! :)

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @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 %).

  • delia-delia profile image

    Delia 5 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.

  • profile image

    anonymous 5 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!!!!!!

  • Lemming LM profile image

    Lemming LM 5 years ago

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

  • profile image

    anonymous 5 years ago

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

  • Millionairemomma profile image

    Millionairemomma 5 years ago

    One word: amazing!

  • John Dyhouse profile image

    John Dyhouse 5 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

  • lilblackdress lm profile image

    lilblackdress lm 5 years ago

    Very helpful. Thanks!

  • profile image

    anonymous 5 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!

  • patriciapeppy profile image

    patriciapeppy 5 years ago

    thanks so much for this valuable resource

  • Linda Pogue profile image

    Linda Pogue 5 years ago from Missouri

    Helpful information. Thanks!

  • favored profile image

    Fay Favored 5 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...

  • sharonbellis profile image

    Sharon Bellissimo 5 years ago from Toronto, Ontario, Canada

    This is great stuff, thanks!

  • Spiderlily321 profile image

    Spiderlily321 5 years ago

    Great tips and tricks. Thank you for sharing this!

  • Pam Irie profile image

    Pam Irie 5 years ago from Land of Aloha

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

  • tjustleft profile image

    tjustleft 5 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.

  • magictricksdotcom profile image

    magictricksdotcom 5 years ago

    Thanks for the tips!

  • gatornic15 profile image

    gatornic15 5 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.

  • profile image

    cmadden 5 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!

  • JoyfulReviewer profile image

    JoyfulReviewer 5 years ago

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

  • profile image

    xmen88 5 years ago

    Interesting and useful.

  • profile image

    StaCslns 5 years ago

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

  • profile image

    Quirina 5 years ago

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

  • mythphile profile image
    Author

    Ellen Brundige 5 years ago from California

    @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.