How to add and align multiple images side by side vertically

Todays tutorial will show you two ways of adding vertical images side by side and making them align correctly with a horizontal image. I go through how to do this on Blogger, but you can also do it on WordPress using the same code. An example of the layout is shown below also. This is very popular with fashion bloggers who like to show photos of the full outfit and detail photos.

Fixing the Spaces between Images on Blogger

  1. Firstly, follow this tutorial on how to remove the space between images on Blogger. This will make everything look neater and sit together better by remove excess spaces.
  2. Now go to Template > Edit HTML and just before </b:skin> add the following code. The first line alters the max width your images will appear. The second line helps define your post-body size, so the width of your content. These will just make sure that the images line up.
.post-body img { max-width: WIDTHpx !important; }
.main-inner .column-center-inner .section { width: WIDTHpx !important; }

Here is a tutorial on how to automatically resize post images to fit blog post area.

add vertical images side by side

METHOD 1 – Adding images side by side Blogger & WordPress

  1. Upload your images to a hosting site, like Photobucket. When adding images vertically like this on Blogger, it’s best to use a alternative image hosting. Start a new post. Click the HTML tab on Blogger or Text tab on WordPress and add the following code.
  2. <img src="IMG 001" width="WIDTHpx" /> <img alt="" src="IMAGE 002" width="WIDTHpx" /> 
    <img alt="" src="FULL IMAGE URL 003" />

    or if you don’t want a gap in between the images, use this code without the space.

    <img src="IMG 001" width="WIDTHpx" /><img alt="" src="IMAGE 002" width="WIDTHpx" /> 
    <img alt="" src="FULL IMAGE URL 003" />
  3. The first line is for two vertical images, enter the direct URL from Photobucket. You will need to define the width of them to make them side by side. There will be a space in between (about 10-12px) so you’ll want to include that when calculating. The second line is for your normal horizontal images. You don’t need to define a size here, especially if you did step 2, but you can if you want to ensure they line up correctly. To add the width just add width="WIDTHpx" before the closing /> like in the first line.
  4. Then click back to the Compose or Visual and start writing your blog post.

An Example of vertical & horizontal images

<img src="URL" width="276px"> <img alt="" src="URL" width="276px" /> 
<img alt="" src="URL" width="560px" />


METHOD 2 – Use Tables to add vertical images side by side

This is an alternative but very similar way of adding vertical image side by side. The use of tables allows you to add more code in order to customise it. It’s an older HTML way. I’ll talk about tables in more detail in a future post.

<table>
<tbody>
<tr>
<td><img alt="DESCRIPTION" src="DIRECT IMAGE URL 1" width="WIDTHpx" /></td>
<td><img alt="DESCRIPTION" src="DIRECT IMAGE URL 2" width="WIDTHpx" /></td>
</tr>
</tbody>
</table>
Buy me a coffeeBuy me a coffee

20 Comments

  1. no b:skin exists in my html
    can’t align images 🙁
    when I try to manually change the sizes to match, the two images side by side jump to the left of the page. help??

    1. The opening of b:skin usually appears at line 13, find it and scroll through your blog’s CSS (Style). I can see that you are using Blogger’s default image hosting which is Picasa, you need to upload your images using a hosting site such as Photobucket. Try that and let me know how you get on x

  2. Hey ellie! For some reason my images are failing and you can see the outline of them side by side but no actual photo.. Do you know what I’m doing wrong?

    Thanks for your help xxo

    1. Are you using the direct image url? You need to use this and not the web URL, the direct image url will have the file extension at the end (.png or .jpeg) so your first image of the clouds is http://farm6.staticflickr.com/5543/9443799309_31058dd155.jpg and not http://www.flickr.com/photos/[email protected]/9443799309/.

      When you click share image, the img src in the HTML Share option is what you are looking for or you can click on the image and choose “Copy Image Address” or something similar depending on your browser.

  3. Hi,
    Why do people host images on photobucket etc rather than uploading direct to blogger? Whats the advantage of this?
    Do you have the code if you do upload direct?
    Thanks Laura

    1. There’s multiple reasons really, one has to do with with the limited space that Blogger offers. Blogger uses a site called Picasa Web Albums (& Google+) to host images, you only have a certain amount of space before you have to pay to increase it. Another reason is that Blogger images adds unnecessary code to your blog post, which is difficult to edit, the code results in extra spacing between images in your blog posts. When you upload to an alternative image hosting site, you just copy the direct img code and paste it into your blog post. I explain all of this a little more in this post – http://xomisse.com/tutorial-remove-spaces-between-images-in-blogger/. Hope this answers your question 🙂 xx

      1. Hi Ellie,

        I like uploading photos directly onto Blogger mainly because of the ‘built-in’ Blogger slideshow. I’ve been merging two photos together in Gimp and uploading the one combined photo instead of dealing with two separate photos. But I’d rather have the two separate photos side by side that can still be seen in the Blogger slideshow. So in short, am I able to adjust the html when uploading photos onto Blogger so that I can get vertical images to appear to side by side? Thanks in advance for your help!

  4. Hi, just wondering what would the code be to center vertical images which are side by side, without the horizontal image?

  5. I am trying to start working on a blog and trying to do 3 images (each with captions) side by side. I can get them all lined up without the captions but as soon as I add the captions, it separates them all and doesn’t work.

    1. Adding captions via Bloggers menu creates a table, so you’d have to edit the table by combining what is already created and the method shown above in order to get multiple images and captions to show. If you’re not overly familiar with tables, it might be easier to edit the images and captions togther into one image before uploading 🙂

  6. Hi Ellie,
    When I upload my images through Blogger I can click on an image on my blog and view all of them in the slide show (lightbox?)
    When I use the method above…that lightbox function goes away and users can see an enlarge view of my images on my blog.
    Is there a way to align images, but still have the lightbox feature activated?

    Thanks!

Sorry, comments are closed!