Displaying images side-by-side in WordPress
I’ve been using WordPress for about two months now and I really like it. It takes away a lot of the pain from blogging. Recently I was writing a blog post and I was trying to get two images displayed side-by-side. This proved to be more difficult than I thought. There’s no immediately obvious way in WordPress to display images side-by-side. I tried to use tables, but that didn’t work out. I also tried to use the gallery, but that displays all the images, and I just wanted to display two. I was able to get it working finally.
The method involves the inline-block display property. You first insert images as you normally would, making sure that they have no alignment. An important point to note here is that you might want to adjust the size of your images if their combined width (plus any padding) exceeds the width of content area. Once you adjust the sizes of the images (if you need to), you wrap each image in a div that has its display property set to inline-block. You also want to set the right margin to some non-zero value so that there’s a space between the images. The code looks like this:
<div style="display: inline-block; margin-right: 5px"> [ ... wordpress generated code for first image ... ] </div> <div style="display: inline-block"> [ ... wordpress generated code for second image ... ] </div>
And the rendered content, like this:
Honey and Ham
Ham Jumping
What if you wanted to center the content? That’s pretty simple too:
<div style = "text-align:center"> <div style="display: inline-block; margin-right: 5px"> [ ... wordpress generated code for first image ... ] </div> <div style="display: inline-block"> [ ... wordpress generated code for second image ... ] </div> </div>
The rendered content looks like this:
Honey and Ham
Ham Jumping
The only problem with this solution is that it won’t work in browsers that fail to implement standards correctly (IE8 does though). But overall, a pretty simple method that should work in most browsers. Also, instead of having to type out the styles every time, you can easily add these to your stylesheet and then use them as you need them.
Popularity: unranked [?]
Hi Vivin,
Your tips worked for me beautifully. I just have to adjust the margin to make it more spaced apart.
Thanks!
Regards,
BB
It works perfectly
But is there any easier way to do this?
@hairstyles2012
I can’t think of another way of doing this short of using a table, but depending on your theme, you may have to use some additional CSS to make sure that the borders don’t show.
[...] Aligning Photos in WordPress – http://vivin.net/2009/11/05/displaying-images-side-by-side-in-wordpress/ [...]
Pingback by Color Correcting and Photos in Wordpress | Producing Emerging Media | November 14, 2011
hi vivian,
finally, I can put the image side-by-side by following your easiest instruction..thx a lot
@hairtsyles 2012 It’s a simple and powerful codes i know for this purpose
Thanks for the tip , I was looking for a way to set up the image side by side ,you have save me a lot of time
Thank you!! I am a total technobimbo and I was able to follow your instructions and figure it out.
This was exactly what i was looking for. Very good explanation of how to displaying images side-by-side in wordpress. Now i get little more control in my posts! Thank you ;D
I’ve been trying for a long time to do this. I finally can do it, thank you for making it possible. God bless you.
Thank you for this valuable information! I looked and looked for this info for almost (not kidding) 2 years! Of course, not consistently, but off and on, yes. I was amazed with your clarity and give you 5 stars and tons of kudos. Who would have thought that the random musings of a computer nerd would be so helpful!
Cheers mate.
This helped me out no end! Thanks
Also it would be nice if wordpress gave us this sort of page layout ability, but nevertheless thanks 
Thanks so much, this post is still helping people including me! I was able to solve my photo layout problem quickly thanks to your effort in finding the solution and sharing it.
This is probably a really stupid question but what do you mean by “use the wordpress generated code for the image”? I inserted the URL generated by WP and that only managed to disply the URLs.
I would greatly appreciate your answer!! Also, what size do the pics need to be to be centered? (FYI my current work in progress site is located at http://commercial-air-conditioning-refrigeration.com/wp
My current theme width is 90%!
Thank you!
Thank you so much for doing this tutorial, vivan! It has helped me a lot!
@Tina–The code that vivan is talking about is the code that wordpress would generate for your image if you have it insert it. To get that code just have wordpress insert the image and then copy and paste in the generated code.
The code will look something like this depending on what your settings are:
[caption id="attachment_77" align="alignnone" width="150" caption="your caption"]<a href=”URL you want the image to be anchored to”><img class=”size-thumbnail wp-image-77″ title=”Image title” src=”Image URL” alt=”Alternate text” width=”150″ height=”150″ /></a>[/caption]
Just insert that code where vivan has directed.
Vivin,
a genius solution differs from a good solution by its simplicity!
If we ever meet, beer…or whatever your drinking is on me. You saved me there big time!
Thank you very much for the post!
Thank you so much! I’ve been trying for three days, kind of silly if you think about the simple result you want to reach…
…love your dogs:)
Carlos
I re-read everything but still not sure. I inserted 2 images, one after the other with no alignment, but where do I paste the code? When I switch to HTML, there are so many text and symbols. I tried to find where to insert it and it didn’t work?
Could you pls advise? I am not familiar at all with the HTML editor.
Thanks
I cant get it to work. I double checked everything. I’m not sure why it’s not working….
Thank you!!! Life Saver!!
I figured it out! I had not reduced the picture sizes. It looks great: http://findingamandine.wordpress.com/2012/05/05/before-and-after-the-garden/
I found an easier way: put the images next to each other and give them both either left or right alignment. Make sure the images are small enough that they will both fit on one line, including borders and margins. Otherwise, one of the images will be bumped to the next line. If this happens, you can resize the images so that they can fit side by side.