How to dynamically level div height

Question

I have two columns in my layout. Main content and sidebar. My requirement is a side panel that automatically adjusts its height if the main content grows. And I want to achieve this the other way around.

Here is a sample code: http://jsfiddle.net/SZ7y9/4/

It will be great if I get a fix for IE6.

Answer 1

Faux decks are nice, but if you want a clean CSS version - http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container with overflow set to hidden, then on each div add a negative bottom-edge and an equal positive lower bottom.

#container { overflow: hidden; } #container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } #container .col2 { background: #eee; } <div id="container"> <div> <p>Content 1</p> </div> <div class="col2"> <p>Content 2</p> <p>Content 2</p> <p>Content 2</p> <p>Content 2</p> </div> </div> 

EDIT: If you want the frame to be rounded, look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html

Answer 2

I think faux posts will work: http://www.alistapart.com/articles/fauxcolumns/

Answer 3

I saw that it took a million times. In general, what I will do is:

Fiddle

Basically insert an inner container inside it with the background color of the side panel and set the side panel to transparent. Then, if you want the background to appear in the gutter, place the border on the right in the main content area so that you get a kind of artificial gutter.

Warning. The main content area should be longer than the sidebar, or the "gutter" will be displayed as far as the main content area. I usually fix this by setting a minimum height in the main content area.