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:
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:
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.
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.
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.
Just wanted to take a couple of seconds to thank you for this. Works beautifully and this is something that’s been bugging me about WordPress forever.
Didn’t want to just steal your tip without also thanking you for it 🙂
Thank you so much for sharing this! It has saved me a ton of frustration.
I’ve been trying to do that for over an hour then found this page. It’s safe to say that you are my most favourite person in the world right now!
Thanks you thank you thank you! I have been wanting to do this for ages and finally found your site. I am a bit of a self-taught novice at using html codes but I pasted your code and moved my WP generated image code into the right spot and IT WORKED! Yay 🙂
Quick and easy way to inline images. This article bookmarked and Evernote clipped!
How can you do this with more than two pictures?
Hey thanks so much for sharing this gosh you made life so much better!! It worked well! Thank you!
Hi Vivian,
This coding worked great for my first two images. What would the coding be for additional images on the same line? I tried to add a third image after successfully placing two images side by side. The third image, was adjacent to the other two but out of alignment. The third image is the same size as the first two. Do you know how to fix this? I would really appreciate your help! Thank you!
This was of great help. The only problem is a slight gap between the images. I am just not able to get rid of it completely. I’ve tried margin:0, float: left for all but still a small space continues 🙁 If you have a solution, please help! thanks again for this easy solution…
I’m going crazy with this. It just won’t work! I’m using the Bueno Theme. Where exactly do you enter the new code and do you enter it it’s entirety? Do I change from the visual view to the text view when editing the post in which I’ve placed two photos from my media library and then paste the code you provide underneath the other code that’s there? Or do I do it through the edit box on the image? I’ve tried so many different things and nothing works. I’ve uploaded two images from my media library and reduced the size. Please help! Thanks in advance.
@Pavi:
I wonder if it’s related to the theme you’re using. Perhaps the theme itself is setting some sort of padding or margin?
@LBatt:
Yes, you enter the code in its entirety. You have to go into text view (the view where you can see the code). Basically insert the images as you normally would with word press. Then add the code I have shown above. The new code must “wrap” the old code. So basically the WordPress-generated code sits in the middle of the new code.
Gotta say thanks. Helped yet another incompetent non-programmer soul.
For those who it is not working for (I tried it a few time until it worked:
– This code is placed under the HTML tab for creating your page
– For more than 2 pics just duplicate the second div that Vivin showed us (add padding if needed)
– don’t forget to close the div a last time to wrap it all up… look at Vivin’s code closely (can you tell I’m not a programmer?)
Thanks for the tricks.
I’m using your first option (without margin) and it solved my problem.
sorry, i mean without center alignment.
Thanks for the code, Vivin. Simple and effective, and easy to find via Google.
You just saved my life. 🙂 Cheers and thank you!
I’m so close. What does “wrap in a div” mean and where are the ‘display properties’? I’ve been trying to do this for about 3 hours now and can’t figure it out. Thank you all so much for your help!!!
@Shannon: “Wrap in a div” just means that you need to surround your image-displaying code with the “div” tags that I have shown in the post.
The “display” property is just a CSS attribute that tells the browser how to display the content. Hope this helps!
Hi, great tip – worked like a charm!!
I’m using to add 4 images in a row, and it works perfectly!!
Now all I need is to add a link to those images… that’s where I’m stuck!! Can anyone help?
Much appreciated!!
Sorry… it’s explained right there – thanks again!! 😉
Thank you so much for this tip! It worked perfectly! Is there any chance you know how to center the block of photos within the column?
Just wanted to say thank you very much for this tip. It was exactly what I wanted and it worked perfectly.
Thanks again,
– Ralph
Thank you so much for this tip!
Thank you!!!
@Chris: Hello Chris, I think you should be able to center the images by centering them within the individual divs. So you can wrap the image in another div and then center the content in that div using text-align: center. Give that a shot. 🙂
Woo, perfect, cheers!