CSS Two Boxes with same height

4 Views

All I want is to make right column’s height (and images in it) depend on the left. Left one’s height keeps changing based on width and right column’s height changes too but they are never equal.

CSS

Read More
div.home-bottomleft, div.home-bottomright {
    float:left;
    display:table-row;
    padding:10px 0;
}
div.home-bottomleft {
    width:45.3%;
    background: url(/wp-content/themes/jdesign/images/div-separator.png) right no-repeat;
}
div.home-bottomright {
    width:54.7%;
}

HTML 

<div class="home-bottomleft">
<img class="home-bottom-motive" src="/wp-content/themes/jdesign/images/homepage-motive.png" alt="Bottom Top Motive" /></p>
<p class="book_antiqua home-bottomtext">XX Events is a full-service event planning company in Chicago dedicated to creating an enjoyable and stress-free planning experience for our clients. We are motivated by event trends, inspired by traditions, and fascinated by all of the details that go into a personalized and flawless event!</p>
</div>
<div class="home-bottomright">
<div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/XXevents-bottomleftimg.jpg" alt="XXevents" /></p>
<p>Weddings</p>
</div>
<div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/XXevents-bottommiddleimg.jpg" alt="XXevents" /></p>
<p>Social Events</p>
</div>
<div class="home-brbox"><img class="home-brbox-img" src="/wp-content/uploads/2013/05/XXevents-bottomrightimg.jpg" alt="XXevents" /></p>
<p>Showers</p>
</div>
</div>


Post Views: 4

Related posts

Leave a Reply

2 comments

  1. So, you have a left column with varied height, and you want the right column’s height to be determined by the left (I think – your question is not entirely clear).

    The easiest way to do this is to have the left element in flow, and the right element absolutely positioned and stretched to its container.

    You can see this effect at: http://jsfiddle.net/yNKxG/1/

    A pseduo-HTML example:

    <container>
    <div, width: 50%;></div>
    <div, position: absolute; top: 0; right: 0; bottom: 0; width: 50%;></div>
</container>

    Note that this won’t include the text resizing you show in your mockup; that will have to be achieved through some other means (possibly only JavaScript, unless the change in the height of the left column is triggered through media query breakpoints).