WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Arrange Multiple Images Side By Side (9 posts)

  1. objectnull
    Member
    Posted 6 years ago #

    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!

  2. iridiax
    Member
    Posted 6 years ago #

    Your images are wrapped in divs (imagecaptioneasy, imagecaptioneasy_nowrap) and these are what you need to edit in your style.css.

  3. eelay
    Member
    Posted 6 years ago #

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

  4. objectnull
    Member
    Posted 6 years ago #

    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.

  5. objectnull
    Member
    Posted 6 years ago #

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

  6. iridiax
    Member
    Posted 6 years ago #

    Your image divs should have the class imagecaptioneasy_nowrap removed.

  7. objectnull
    Member
    Posted 6 years ago #

    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.

  8. iridiax
    Member
    Posted 6 years ago #

    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.

  9. objectnull
    Member
    Posted 6 years ago #

    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>

Topic Closed

This topic has been closed to new replies.

About this Topic