follow height of parent div, auto adjust height of parent div when child div has a longer content.

Question

here is my HTML -> http://aivan.info/

Structure

<div id="wrapper">
    <div id="leftg">
    </div>
    <div id="container">

        <div id="header">
        </div>
        <div id="logo">
        </div>
        <div id="navigation">
        </div>
        <div id="body">
            <div id="bleft">
            </div>

            <div id="bright">
            </div>
        </div>
    </div>
    <div id="rightg">
    </div>
</div>

I would like rightg and leftg to follow the height of wrapper while I want the height of wrapper to fit the contents of body. I want body to be fluid based on the contents with a minimum height.

PS: should be IE6,IE7,FF6 Compatible

Answer 1

Is this what you want : http://www.alistapart.com/articles/fauxcolumns/ ?

Answer 2

This is a very common problem with no nice and obvious solution. I think tables is the best option for this. Do some googling, you will find tons of various implementations.

One trick is to put left inside right and maincontent inside left, it won't be right sementicaly but you can style it so it looks like 2 panels on each side. This is assuming that the main content will always be longer than panels and i guess there are some other quirks too.

Answer 3

Add an extra div after every float element with a clear:both style attribute. remove all the height properties for the wrapper, and the body containers.