Pure CSS solution for equal column height with stacked divs

StackOverflow https://stackoverflow.com/questions/9737499

  •  24-05-2021
  •  | 
  •  

Question

I recreated my issue here.

The problem is that the 'left' div should be matching the combined height of 'top' and bottom' right divs. I have been reading articles and tutorials on how to achieve equal height with columns of varying content but none of them seem to apply to the 'stacked' columns.

My current nonworking solution was built on a concept taken from this article:

The only way to make the height of a div equal to the tallest column is if that div contains all the columns. So to explain this another way, by placing the columns inside a container we cause the container to be the height of the tallest column. This is a very useful structure. For this structure to work correctly in all browsers the container div must be floated (left or right) plus each of the column content divs must also be floated, it does not matter which way.

I am aware of the equalHeights jQuery plugin and resize, but I would very much prefer CSS solutions.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    </head>
    <body>
      <div id='container'>  
        <div id='height-container'>
            <div id='left'>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nunc non semper fringilla, nibh mauris aliquam diam, sit amet suscipit purus ligula eu odio. Nulla tortor neque, sodales nec placerat vitae, laoreet a mi. In ac ullamcorper dui. Sed enim tellus, volutpat at tristique eu, condimentum volutpat tellus. Integer massa quam, egestas id vulputate id, ultrices ut felis. 
            </div>
            <div id='right'>
              <div id='top'>
                  Proin condimentum purus tortor, eu laoreet velit. Praesent ornare, mauris eu laoreet suscipit, nibh mauris imperdiet dolor, ut molestie erat tellus ac odio. Etiam tempor eros at neque tincidunt a feugiat massa imperdiet. Vestibulum aliquet nibh sit amet urna facilisis condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ornare dolor quis neque aliquet lacinia et id tortor. Fusce eu sapien non mi aliquet condimentum id vitae ante. Phasellus sit amet eros vitae velit fringilla facilisis non at eros. In non venenatis lectus. Nam tortor tellus, vehicula non vulputate vitae, mollis a velit. Pellentesque gravida pretium ante, eu volutpat risus viverra non. Duis purus quam, venenatis nec consectetur interdum, aliquam rutrum diam. Donec interdum odio eget ante consectetur in sodales mi molestie. Nunc bibendum, turpis vel vulputate accumsan, diam tortor placerat sem, sed posuere risus purus eu massa. Nullam eleifend pulvinar massa, nec cursus velit dictum quis. 
              </div>
              <div id='bottom'>
                   Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur. <br><br>
                  Praesent vel porttitor dolor. Nulla vel nisl quis nibh bibendum rutrum. In gravida lacus a tellus tempus at pretium quam iaculis. Quisque fringilla feugiat urna, ac tincidunt tellus ornare et. Aenean sit amet turpis at ante molestie accumsan. Duis vestibulum, tortor nec aliquam tincidunt, leo urna tincidunt nunc, et laoreet metus risus quis erat. Proin at sem leo, sit amet bibendum quam. Vivamus quam urna, pulvinar vel tempor eget, facilisis tristique ipsum. Aenean sed ipsum et odio convallis congue a sit amet leo. Morbi luctus odio a felis pellentesque sit amet cursus ante consectetur.
              </div>
            </div>
        </div> 
    </div>        
    </body>
</html>

CSS:

body{
    text-align:justify;
}

#container{
    width:1000px;
    margin:0 auto;
}

#height-container{
    background:orange;
    float:left;
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    float:right;
}

#top{
    background:yellow;
    padding:20px;
}

#bottom{
    background:#00FF66;    
    padding:20px;
}
Was it helpful?

Solution

You can use display:table property for this:

#height-container{
    background:orange;
    display: table;
    vertical-align:top;
}

#left{
    display: table-cell;
    width:200px;
    background:#CD5555;
    padding:20px;
}

#right{
    width:600px;
    display: table-cell;
}

Check this http://jsfiddle.net/6rBAw/2/

But it's work till IE8 & above

UPDATED

CSS

#left{
    width:200px;
    background:#CD5555;
}

#right{
    float:right;
    width:600px;
}
.clr{clear:both;}

HTML

<div id='right'></div>
<div id='left'>
  <div class="clr"></div>
</div>

Check it http://jsfiddle.net/6rBAw/4/

OTHER TIPS

Here is a solution which works in IE 7 as well http://jsfiddle.net/6rBAw/6/ this solution makes use of negative margin bottom and padding bottom, the only thing is you have to give the margin bottom and padding bottom value the same and a large value and give the container of the column overflow hidden property.

#container{
    width:1000px;
    margin:0 auto;
    **overflow: hidden;**
}

#left{
    float:left;
    width:200px;
    background:#CD5555;
    **padding:20px 20px 99999px 20px;
    margin-bottom: -99999px;**
}

#right{
    width:600px;
    float:right;
    **padding-bottom: 99999px;
    margin-bottom: -99999px;**
    background-color: black;
    height: 1000px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top