How to Lay Out Side by Side Pictures?

Putting side by side pictures  into a Blogger

In my previous post on the subject, I had talked about the basic phenomenon by which pictures are put side by side in a post. Now here, we will go a step further, and discuss as to how Side by Side Pictures can be laid by the help of HTML code.

If you add/upload an image directly from blogger post editor, it will be automatically put in a div, and styled with “text-align:center”. The same default setting will also be applied to the second, third, fourth… image you add. Open your post editor and choose HTML mode (after you add some images), the codes will be similar to this:

<div style=”text-align: center”><a href=”imageurl”><img src=”imageurl”></a></div><div style=”text-align: center”><a href=”imageurl”><img src=”imageurl”></a></div><div style=”text-align: center”><a href=”imageurl”><img src=”imageurl”></a></div>

and so on…..

If you want to put the Side by Side Pictures, simply remove the individual div tag  covering every link/image tag, and cover the link/image tags with A SINGLE div tag

<div style=”text-align: center”><a href=”imageurl”><img data-src=”imageurl”></a><a href=”imageurl”><img src=”imageurl”></a><a href=”imageurl”><img src=”imageurl”></a><div>

Check the result in Compose mode.

Please note that the images will be shown side by side IF your blog post width is bigger than the total width of the images and their styles.

If you want to give the same size to the images, simply add width and height values inside the image tag:

<a href=”imageurl”><img width=”200px” height=”100px” src=”imageurl”></a>

Or else, you need to re size the images before uploading them. Hope this geeky trick about putting Side by Side Pictures will be useful. 🙂

You might also like More from author


  1. Eugene Monaco says

    Thanks for the help on how to do this, I do have some post that I would like the images side by side but didn't know to to do it. Thanks again 🙂

  2. RS Pandey says

    Most Welcome 🙂

Comments are closed.