WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How to Arrange Multiple Images Side By Side

[Resolved] How to Arrange Multiple Images Side By Side

  • objectnull
    Member

    @objectnull

    Multiple images in a post currently display vertically and I would like them to go horizontal.

    This is my code for the images

    <a href="http://www.darkforestfilms.com/about/dustin-parsons/">
    <img style="float:left; margin: 2px;" src="http://www.darkforestfilms.com/wp-content/uploads/about/dustin_about_photo.jpg" alt="Dustin Parsons" width="150" height="150" /></a>
    <a href="http://www.darkforestfilms.com/about/robert-greene/">
    <img style="float:left; margin: 2px;" src="http://www.darkforestfilms.com/wp-content/uploads/about/robb_about_photo.jpg" alt="Robert Greene" width="150" height="150" /></a>

    And here’s how it turns out.

    What am I doing wrong? Any help is appreciated. Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Your images are wrapped in divs (imagecaptioneasy, imagecaptioneasy_nowrap) and these are what you need to edit in your style.css.

    To add a float : left; on the css class .imagecaptioneasy would probably do the trick.

    objectnull
    Member

    @objectnull

    Thanks for the speedy replies!

    Here’s what I found in the style.css.php for imagecaptioneasy

    .imagecaptioneasy {
      padding: 5px;
      font-size: 10px;
      line-height: 1.15em;
      text-align: center;
      border: 0
      background: #242b30;
      color: #adb5c1;
    }
    .imagecaptioneasy img { border: 0px solid #fff; margin-bottom:5px; }
    .imagecaptioneasy span { text-align: center; }
    .imagecaptioneasy_top_left { margin: 0 11px 11px 0; float: left; }
    .imagecaptioneasy_top_right { margin: 0 0 11px 11px; float: right; }
    .imagecaptioneasy_top_nowrap { margin: 0 0 11px 0; float: none; }
    .imagecaptioneasy_left { margin: 11px 11px 11px 0; float: left; }
    .imagecaptioneasy_right { margin: 11px 0 11px 11px; float: right; }
    .imagecaptioneasy_nowrap { margin: 11px 0 11px 0; float: none; }

    I tried adding the float : left; after color : #adb5c1; but that didn’t change anything (I did not modify the HTML code in my page).

    Does it matter that I’m using HTML to input the pictures rather than CSS? Could that be messing it up or did I just put the float : left; in the wrong area?

    Thanks again.

    objectnull
    Member

    @objectnull

    Anyone have even a guess or did I stump the internet?

    Your image divs should have the class imagecaptioneasy_nowrap removed.

    objectnull
    Member

    @objectnull

    I tried deleting .imagecaptioneasy_nowrap { margin: 11px 0 11px 0; float: none; } from my style.css.php but that seemed to have no effect.

    Your image divs should have the class imagecaptioneasy_nowrap removed.

    I’m not sure what that means. I don’t have imagecaptioneasy_nowrap anywhere in my HTML. Or am I completely misunderstanding you? Is this something I have to modify in the style.css.php file or in the HTML in my page?

    I apologize, I’m okay with HTML but am completely lost with CSS. If anyone knows the specific code I need to input or modify that would help. Otherwise I’m just shooting in the dark.

    Again, thank you so much for your assistance, I really appreciate it.

    In your html, I see this which assigns the class imagecaptioneasy_nowrap to your image div:

    <div class="imagecaptioneasy imagecaptioneasy_nowrap" style="width:150px;">

    In your style.css, I see this class:

    .imagecaptioneasy_nowrap { margin: 0 0 11px 0; float: none; }

    If this is due to a plugin, either change the plugin settings (if it has them) or disable the plugin and style your image caption divs yourself.

    objectnull
    Member

    @objectnull

    Got it! Thanks you all for your help!

    I had to search the Page Source to see what you guys were talking about.
    Here’s what I did to my code to make it work with the imagecaption plugin.

    <div class="imagecaptioneasy imagecaptioneasy_left" style="width:150px;">
    <a href="http://www.darkforestfilms.com/about/dustin-parsons/">
    <img src="http://www.darkforestfilms.com/wp-content/uploads/about/dustin_about_photo.jpg" alt="Dustin Parsons" width="150" height="150" /></a></div>
    <div class="imagecaptioneasy imagecaptioneasy_left" style="width:150px;">
    <a href="http://www.darkforestfilms.com/about/robert-greene/">
    <img src="http://www.darkforestfilms.com/wp-content/uploads/about/robb_about_photo.jpg" alt="Robert Greene" width="150" height="150" /></a></div>

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] How to Arrange Multiple Images Side By Side’ is closed to new replies.