Question

I have two columns in my layout. Main content and side bar. My requirement is the side bar should automatically adjust its height if the main content is growing. And I want to achieve this vice versa.

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

It will be great if I get the fix for IE6 too.

Answer 1

Faux columns is good but if you want a pure CSS version – http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-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 a border round it then have a look at this example – http://www.ejeliot.com/samples/equal-height-columns/example-6.html