Stay GIF: Putting pictures side-by-side in a blog post or gadget

This article shows how to put pictures side-by-side in Blogger (or any other website) using HTML, in a way that works for visitors using mobiles (smartphones and tables) as well as larger screens.

Placing pictures side by side in Blogger: a picture of three images next to each other on the same line

Previously I've explained how to use a table to force photos (and other things) to all show into a line, even if the user's screen is too small to display them all at once. And I've looked at putting text and pictures side-by-side - assuming you're only working with one picture.

Tables are great if you are showing data and need rigid alignment, or if you don't mind your mobile device visitors having to either scroll, or to pinch their screen so much that they cannot read the text.

But there is a way to lay out pictures so that they display side by side if there's room on the screen, or start on a new line if there's not.

I've done this recently on a blog where really wanted to make a display for last / next week and last / next year on two different dimensions. It looks like this on a smartphone vs a tablet. Notice that on the tablet, the two middle pictures are on the same line.

How to lay out several pictures side-by-side if there's space, or one-under-another if not

Start to prepare your post in the usual way.

Add your pictures to the post in the usual way. Ideally, put them just before or just after some marker text that you can use to help you to find the code for it in the next step.

Hover over each picture, and choose the small size (you can change this later)

Go into HTML mode.

Find the place where the pictures are. (If you've used marker-text, just use your browser's search feature to go to it.)

Add this code, just where you want the line of images (or other items) to end up.

<div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;">
IMAGE CODE FOR PICTURE</div>
<div style="display: inline-block; margin-bottom: 2em; margin-right: 2em; width: NN;">
IMAGE CODE FOR PICTURE</div>
<div style="display: inline-block; margin-bottom: 2em; margin-right: 0em; width: NN;">
IMAGE CODE FOR PICTURE</div>

That has space for three pictures - you can delete one or add more lines if you want to - just make sure that the very last one has margin-right: 0em; and the others all have margin-right: 2em;

Now, for each picture that you added,

Find the HTML code for it. (This post has a detailed explanation of what the HTML code for a picture)

Delete the height = "nn" part from it (nnn = whatever number is there)

In the width = "nnn" part, replace nnn with "100%", so it says width = "100%"
Note: this is saying to make the picture take up the whole width of the division you have assigned it to. You can make it smaller than 100%. But you want to do it put a bigger margin between the two pictures, then you can do this by increasing the value in margin-right: 2em;

Move the picture code to where it says IMAGE CODE FOR PICTURE

Decide how wide the picture should be, and change the value in Width: NN within that DIV statement to the right amount.
You can either use pixels (eg width: 100px;), ems (eg width: 20em;) or percentages (width: 40%;) If you use percentages, then the total amount for all the pictures should be a little less than 100%, so allow for some space between the pictures: for example, with a 2em margin and three pictures in a row, you may need to make the total approx 90%.

Go back into Compose mode, and check that your pictures look roughly right - if necessary, you may need to adjust the picture sizes. (See the note below under Troubleshooting for more about this.)
Delete the marker text.

Job done! Your pictures will now display side-by-side if they can all fit into the user's screen, or one under another if not.

Troubleshooting

Getting the pictures right can be quite fiddly, so I recommend preparing the blog post in private, so you can do this in stages, and save your work regularly as you go.

Your pictures will be vertically aligned on the bottom axis, and this means that the approach will work best with pictures that are the same height. (I'm working on another article looking at alignment issues - it's they're quite tricky.)

Post editor view vs your visitor's screen

An issue that many new bloggers struggle with is that what they can see in the post editor is not the same as what their blog-visitors will see.

The post editor screen is only a certain width. Most times, it is smaller than the width of the main body of your blog. So, if you have used fixed-widths (ie in pixels, or ems, not percentages), more pictures fit on the same line in your blog than in the post editor. But if a visitor is using their smartphone to read your blog (and I do a lot of my blog-reading on the phone these days) - the screen width is less than it is in the post editor.

This is why using <div> statements instead of <table>'s is a good idea. But it does means that sometimes you will have to compromise on whether things can be put together.

Is this only for pictures?

No - you can use this technique with blocks of text, videos - in fact anything that you can put into your blog.

What about gadgets?

You can use this technique anywhere that you can edit the HTML. So, you can put pictures in a row in your sidebar, header or footer by using a HTML-gadget. (This post shows a handy way to get the picture code when you're making gadgets.)

Captions

I don't recommend using captions with this this technique. Blogger shows them using tables: they put the photo and text into a one-column-two-row table, and this makes working with the picture code a lot more difficult. If you really want to use them, then add them after you have moved your picture code inside the <div>...</div> statements.

Using a table to display data in your blog

Marker text helps you to find places in your blog post

Putting text and photographs side-by-side

How to add a picture to a blog post

How to get the HTML code for a picture when you don't have an insert-picture icon on the toolbar