Skip to content

Rough Book

random musings

Menu
  • About Me
  • Contact
  • Projects
    • bAdkOde
    • CherryBlossom
    • FXCalendar
    • Sulekha
Menu

Displaying images side-by-side in WordPress

Posted on November 5, 2009November 6, 2009 by vivin

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]

[ ... wordpress generated code for first image ... ]
[ ... wordpress generated code for second image ... ]

[/sourcecode]

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:

[sourcecode]

[ ... wordpress generated code for first image ... ]
[ ... wordpress generated code for second image ... ]

[/sourcecode]

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.

123 thoughts on “Displaying images side-by-side in WordPress”

Comments navigation

Older comments
  1. Ed says:
    April 10, 2013 at 1:23 pm

    Top notch. Many thanks for this! Worked a treat.

    Reply
  2. Petr Veprek says:
    April 15, 2013 at 2:11 pm

    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”).)

    Reply
  3. Pingback: » Scott and Hannah Photographers Blog
  4. Pingback: Dear Dream Reader | The Extra Pounds
  5. caitlinjh says:
    January 29, 2015 at 1:41 pm

    Thank You!!!

    Reply
  6. STUFFEZES says:
    January 31, 2015 at 6:45 pm

    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

    Reply
  7. pelagic says:
    May 24, 2015 at 6:46 pm

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

    Reply
  8. Sapphire says:
    June 2, 2015 at 2:49 pm

    Thank you so much – who would have thought putting images side by side would involve a tutorial! Bless 🙂

    Reply
  9. Matt VanWallene says:
    June 27, 2015 at 7:23 pm

    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,

    Reply
  10. simeonhanks says:
    September 3, 2015 at 8:23 am

    Fantastic! Thank you!

    Reply
  11. Lisa Cummings says:
    September 7, 2015 at 12:05 pm

    6 years later, your tip just rocked the house!

    Reply
  12. Tara says:
    September 17, 2015 at 4:07 pm

    Yep! well done – one of the few help sites that actually helped 🙂

    Reply
  13. Danny says:
    November 3, 2015 at 8:46 am

    Great tips! So easy to copy from yours and paste in mine. Thanks a whole heapin’ bundle.

    Reply
  14. iambethgreen says:
    November 18, 2015 at 3:15 pm

    A million thank yous! You saved me a lot of aggravation!

    Reply
  15. Chris says:
    November 20, 2015 at 9:17 am

    Thank you very much.
    Like most things, it’s simple when you know how.

    Reply
  16. Yuswardy says:
    December 11, 2015 at 7:49 am

    Many thanks, you have helped me.

    Reply
  17. The Bearden Pack says:
    December 28, 2015 at 1:06 pm

    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.

    Reply
  18. sjwn94 says:
    February 18, 2016 at 10:50 am

    thank you very much, you just made my life a bliss, I hope you get a cookie!

    Reply
  19. Marcin Zajączkowski says:
    May 4, 2016 at 2:14 pm

    It works as expected. Thanks for sharing!

    Reply
  20. natebard says:
    May 5, 2016 at 12:03 pm

    Wow, this is really good advice. Works exactly as described. Thank you!

    Reply
  21. Willy Kahn says:
    June 30, 2016 at 2:16 am

    And many thanks from me too! Worked like a treat.

    Reply
  22. Pingback: download identity 2003
  23. Pingback: Como colocar fotos próximas umas das outras no WordPress - Criarfazer.net

Comments navigation

Older comments

Leave a Reply Cancel reply

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

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • February 2023
  • April 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • June 2017
  • March 2017
  • November 2016
  • August 2016
  • July 2016
  • June 2016
  • February 2016
  • August 2015
  • July 2014
  • June 2014
  • March 2014
  • December 2013
  • November 2013
  • September 2013
  • July 2013
  • June 2013
  • March 2013
  • February 2013
  • January 2013
  • October 2012
  • July 2012
  • June 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • July 2011
  • June 2011
  • May 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • August 2008
  • March 2008
  • February 2008
  • November 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • December 2006
  • October 2006
  • September 2006
  • August 2006
  • June 2006
  • April 2006
  • March 2006
  • January 2006
  • December 2005
  • November 2005
  • October 2005
  • September 2005
  • August 2005
  • July 2005
  • June 2005
  • May 2005
  • April 2005
  • February 2005
  • October 2004
  • September 2004
  • August 2004
  • July 2004
  • June 2004
  • May 2004
  • April 2004
  • March 2004
  • February 2004
  • January 2004
  • December 2003
  • November 2003
  • October 2003
  • September 2003
  • July 2003
  • June 2003
  • May 2003
  • March 2003
  • February 2003
  • January 2003
  • December 2002
  • November 2002
  • October 2002
  • September 2002
  • August 2002
  • July 2002
  • June 2002
  • May 2002
  • April 2002
  • February 2002
  • September 2001
  • August 2001
  • April 2001
  • March 2001
  • February 2001
  • January 2001
  • December 2000
  • November 2000
  • October 2000
  • August 2000
  • July 2000
  • June 2000
  • May 2000
  • March 2000
  • January 2000
  • December 1999
  • November 1999
  • October 1999
  • September 1999
©2023 Rough Book | Built using WordPress and Responsive Blogily theme by Superb
All original content on these pages is fingerprinted and certified by Digiprove