Putting two pictures side by side in a blog post

When you have many photos that you want to include in a blog post, it is important to vary the lay out from time to time. This way, the reader won’t have to scroll down forever and ever to see your pictures. You also should vary the images’ sizes in an aesthetic manner according to their importance.

However, are you sick of having to put up a photomontage every time you want to put two images side by side in your new blog post?

Here’s a simple solution to do that directly in your article from your editor with either Blogger or WordPress

Step 1: Insert your images one after the other

For example:


Step 2: Insert the code

In the HTML tab insert the following code to put two pictures on the same line:

<tr><td>photo 1-1
</td><td>photo 1-2


Go back to the tab “text” and you should see this:

Step 3: Insert images into boxes.

Slide the two images you have inserted into the article in both boxes. Then remove the text “photo 1-1, photo 1-2.”

Tadam, here’s the result!

It’s your turn now!

EDIT 25 feb : If for any reasons you can’t drag the images in the box, here is another way to put the two pictures side by side:

1) Do the step 1 and step 2 as indicated above.

2) Copy image URL

3) Go in the HTML tab and instead of photo 1-1 paste the following code:

<img border=”0″ src=”INSERT YOUR IMAGE URL” width=”250” />

4) Do the same with your second picture.

You can vary the size of your picture by changing in the code the number of pixel 250.


*Credits: Garance Doré

  • LeiShell Correll

    This is great, thank you!

  • Fiona Nichols

    AMAZING. Thanks SO MUCH! I have been battling. And with a bit of tweaking I am now putting three side by side. So simple, but it seems so difficult. Got you down in my bookmarks now. Thanks again.

    • Vanessa Matty

      Can you share the generic code for 3 side by side…

  • Fiona Nichols

    Hi Vanessa. This is the blind leading the blind. I know NOTHING about codes but I looked at what Sophie suggested and copied the second line again and put a 3 into it. It worked. But in Blogspot they have to bee small pictures. And it is a bit fiddly but I got the hang of it. It radically changes the look of a blog page. Go for it!

    photo 1-1
    photo 1-2
    photo 1-3

    • Vanessa Matty

      Worked perfect!! Thank you so much. So grateful for this as it has simplified my pages and improved the look!

    • Abi Prasad

      problem how to display it downwards eg images top 2 bottom :/

  • fredd

    nice one. thanks. already done

  • http://twitter.com/HipBoomerChick Chicky

    Thank you!! I just started blogging and this was my first issue.

  • Emily Swezey

    Where in the code do I put the new piece of code? if I could figure out how to use this it would help me loads! I don’ t know how to do anything in HTML.

    • Sophie

      Hi Emily! Just past the new piece of code where you want to place the pictures. Write your text in the visual tab and then go in the html tab to paste the code. You can contact me at sophie@madeinblog.ca if you want I make you a tutorial more detailed :)

  • Renee

    How do I get those 2 images centered?! :)

    • Sophie

      In your HTML tab, just put these both tags before and after your code : .
      You will get :

      photo 1-1
      photo 1-2

      • Renee

        thank you!!

  • Renee

    Do you have any posts about arranging images in a variety of ways with html?

  • Shundara@savynaturalista

    Thank you!! Thank you!! :)

  • http://www.technologywindow.com/ Ritesh Nishar

    Thanks. This was helpful.

  • Sabrina

    Hi….this worked great but now i need to put a little space in between the two images…can anyone help with this?

  • ScottandRebecca Laird

    It worked! THANK YOU!!!!
    there were no boxes showing up in my version of Blogger, so I just dragged my photos to the text like you said (imagining it was in a box :) ) and voila!

  • Natalia

    Hi Sophie, wow, this is exactly what I needed! But for some reason I cannot drag the pictures into the boxes (even though the size of pictures is small)… So there’s just hanging there in the air one after the other with the text along the “photo 1-1” and “photo 1-2” (not in boxes though as on your screenshot).
    Do you know what might be the problem?
    Many thanks! xx

    • Sophie

      Hi Natalia, I don’t know why you can’t drag the pictures in the boxes. I updated the post with a new solution for you, I hope it helps!

  • kiruthika

    its perfect….. just made it very easily… thanks a lot…..
    i think for post two images side by side “width 300” would work

  • Tonya Papanikolas

    Hi. Thanks for these instructions. I have a question. I was eventually able to slide the pictures into boxes. (It took a little work since there were no real “boxes” around the photo 1 and photo 2 text.) But now the pictures are different sizes next to each other and I want them to be equal. Do you know a way to change their dimensions once they are side by side? (My second picture is larger, even though they looked equal when I had them under each other.) They also go off to the right side of the page way past where the text ends so it looks funny that way. Thanks for your help!

  • Chud Planea

    Hi sophie. Just tried this both instructions but its not working. my site is mahubya.blogspot.com i don’t know if its because of my tempalte or what. hope you can help me with this

  • Tracy

    what if the first option doesn’t work, and the for the second option, my pictures are personal photos, not from URLs?

    • Sophie

      Hi Tracy,

      You just have to host your pictures with an hosting service such as Picasa, Imageshack, tinypic.com, etc and grab the url.

  • Tracy

    When I click on the “html” tab, there is already a bunch of codes there. Do I replace all of the code, or copy/paste the new code to the bottom of all of it…?
    anyway your blog is really cool and helpful

  • http://adelinaradu.blogspot.com/ Adelina

    Great post! Thank you!

  • http://www.mypostadoptionlife.blogspot.com mypostadoptionlife

    This worked great for me, and it’s so easy. Thanks so much for sharing! mypostadoptionlife.blogspot.com

  • msk gupta

    Thanks for the post

  • http://www.wearitforless.com/ Jessica S

    Thank you so much! I am just learning the basics of HTML and this was so easy to understand.


  • Jeffrey Frankel

    I tried it with text boxes base around the following code:

    My text here

    One in place of Photo 1-1 and another in place of photo 1-2. It works beautifully. Just one thing there is a dotted line around the text boxes(the table boxes?) How do I eliminate these extra lines?

  • Robyn Moores

    where abouts on the HTML should you be putting the code in? also i dont see any boxes after just the text am i doing something wrong here?

    Thanks x

    • Sophie

      Hi Robyn,

      Just put the HTML code where you want your images displayed into the article. If you are not seeing boxes you can just slide the images where you see the text “photo 1-1” and “photo 1-2”.

      If it doesn’t work stay in the HTML tab and paste the code of your image (from to ) instead of “photo 1-1” :


      Hope that helps!

  • http://collectinglabels.com Laura

    Is there a way to make the box invisible? So that it just looks like they are floating side by side?