Aligning Two Images on Home Page Twenty Eleven

  • jillianleigh

    (@jillianleigh)


    11 years, 8 months 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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months ago

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

    Thread Starter jillianleigh

    (@jillianleigh)

    11 years, 8 months 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months 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;
}

    Thread Starter jillianleigh

    (@jillianleigh)

    11 years, 8 months ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months ago

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

    Thread Starter jillianleigh

    (@jillianleigh)

    11 years, 8 months ago

    it just moved the second one up.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 8 months ago

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

    Thread Starter jillianleigh

    (@jillianleigh)

    11 years, 8 months 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!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Aligning Two Images on Home Page Twenty Eleven’ is closed to new replies.