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:
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.