PavelBY PavelBY - 6 months ago 9
CSS Question

How to fit equal height for two columns, which are in a centered container?

How can I create equal height columns in CSS? All I have found searching the Internet was for one color background, but I have a white background. Every column must have a rounded border, and the left column may have many containers inside. How do I create this, such that the columns are equal, by which I mean left and right? Also, how can I do that if the height of the right column is smaller than the left, as in the photo? It must be stretched.

enter image description here

Answer

You can use display table. Doesn't play nice with IE7 unfortunately. Although I encourage people to drop support for it. My company just did. There are other techniques available here, but I think semantically this is the most elegant.

http://css-tricks.com/fluid-width-equal-height-columns/

http://jsfiddle.net/7HgwA/1

CSS

body { padding: 10px; }
#container { 
    display: table; 
    width: 600px; 
    margin: 0 auto; 
    overflow: auto; 
    border: 1px solid gray; 
    border-radius: 20px; 
    padding: 10px; 
}

#container > div { display: table-cell; }
#container div { border: 1px solid gray; border-radius: 20px; padding: 20px;  }
#left > div { height: 100px; margin-bottom: 10px; background: white; } 

#left { width: 150px;  background: lightgray; }
#container #spacer { width: 20px; border: none; padding: 0px; }

HTML

<div id="container">
    <div id="left">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
    </div>
    <div id="spacer"></div>
    <div id="right">
        <p>Lorem ipsum dolor sit</p>
    </div>
</div>​
Comments