WordPress.org

Ready to get started?Download WordPress

Forums

Aligning Two Images on Home Page Twenty Eleven (9 posts)

  1. jillianleigh
    Member
    Posted 1 year ago #

    I've been trying to do this for awhile, but I haven't been successful.

    I'm working with a child theme of Twenty Eleven. With everything that I have changed so far, it seems ridiculous that I'm having trouble with such an easy idea. I want two images next to each other on my static home page. The trouble is, I can only get them to align next to each when I have the one-column theme option chosen. However, this is the only page that I want one-column. The rest of my pages, I would like to have a sidebar. So I went back to the "right sidebar" option.

    Now even though I don't see the #secondary sidebar code when I look at my page in firebug, it's almost as if it's still there! My images won't float next to each other!

    here is the link: http://www.zackiscreative.com

    To complicate things more: the images are different heights and widths from each other. I want them to both be aligned with each other from the bottom. Is this impossible?

    Some help would be much appreciated.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Your images are simply too large to fit aside one another, within your content area.

  3. jillianleigh
    Member
    Posted 1 year ago #

    ok I made them smaller and it worked (even though I'd have rather made the content larger but that did NOT work).

    Now, my problem is the alignment. I want them both to align to the bottom. The images are different heights. I've tried using vertical-align: bottom in the css but it didn't do anything.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    On style.css line 160,
    remove display:inline and add height: 332px

    Then add a new style at the bottom:

    .entry-content div a{
     position: absolute;
     bottom: 0;
    }
  5. jillianleigh
    Member
    Posted 1 year ago #

    Wow almost.... but now they are in the same exact spot. Not.. next to each.
    (shakes fist at stylesheet)

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Give the second image anchor an id, then only apply position absolute to that anchor.

  7. jillianleigh
    Member
    Posted 1 year ago #

    it just moved the second one up.

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Did you move the bottom: 0 as well to that anchor?

  9. jillianleigh
    Member
    Posted 1 year ago #

    Eureka! I adjusted the margin-left of the second image id and got it to go over where it should be. Thanks so much for your help!

Topic Closed

This topic has been closed to new replies.

About this Topic