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:
[sourcecode]
[/sourcecode]
And the rendered content, like this:
What if you wanted to center the content? That's pretty simple too:
[sourcecode]
[/sourcecode]
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.
Top notch. Many thanks for this! Worked a treat.
I had to add “width: …” or else the browser would keep re-sizing and re-drawing the pictures in an endless fashion.
(BTW “float: left” works as well (instead of “display: inline-block”).)
Thank You!!!
This may catch you off guard and feel free to laugh…. Article was very informative and to the point; thanks. For me a “way behind”, would you please, tell me where this code is to be placed and is it created in that very place or transferred?
with much appreciation,
Sabrina
thank u so much. after wasting way too much time at other sites explaining this.. yours worked the first time. whoever thought putting 2 pic side by side could be so laborious and destructive:)
Thank you so much – who would have thought putting images side by side would involve a tutorial! Bless 🙂
this is my first day at wordpress coding, thank you for the simple, straight forward solution……. since I am a rookie, can you show me how to add spaces between the pictures? very elementary, I know, but these small tidbits goes a long way, thanks again, also let me know how I can help your exposure,
Fantastic! Thank you!
6 years later, your tip just rocked the house!
Yep! well done – one of the few help sites that actually helped 🙂
Great tips! So easy to copy from yours and paste in mine. Thanks a whole heapin’ bundle.
A million thank yous! You saved me a lot of aggravation!
Thank you very much.
Like most things, it’s simple when you know how.
Many thanks, you have helped me.
Your a lifesaver. I’ve tried code from so many people and nothing would work. Finally used one of yours and it worked for aligning photos without text wrap.
thank you very much, you just made my life a bliss, I hope you get a cookie!
It works as expected. Thanks for sharing!
Wow, this is really good advice. Works exactly as described. Thank you!
And many thanks from me too! Worked like a treat.