Rough Book

random musings of just another computer nerd

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

Honey and Ham

Ham Jumping

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

Honey and Ham

Ham Jumping

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 [?]

November 5, 2009 - Posted by | Computers, Programming and Development, Web | , , , , ,

57 Comments »

  1. Hi Vivin,

    Your tips worked for me beautifully. I just have to adjust the margin to make it more spaced apart.
    Thanks!

    Regards,
    BB

    ReplyReply

    Comment by kailin | October 1, 2011

  2. It works perfectly
    But is there any easier way to do this?

    ReplyReply

    Comment by hairstyles 2012 | October 27, 2011

  3. @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.

    ReplyReply

    Comment by vivin | October 27, 2011

  4. hi vivian,

    finally, I can put the image side-by-side by following your easiest instruction..thx a lot :)

    ReplyReply

    Comment by ariza | November 16, 2011

  5. @hairtsyles 2012 It’s a simple and powerful codes i know for this purpose

    ReplyReply

    Comment by Short Hairstyles | January 8, 2012

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

    ReplyReply

    Comment by Jamie | January 17, 2012


Leave a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
All original content on these pages is fingerprinted and certified by Digiprove