Stretch different divs based on each other - css

Question

I'm having an issue with stretching div A based on the height of div B, OR stretching div B based on the heigt of div A (depends which has the most content).
I tried looking into faux columns, but as my divs aren't in the same 'holder' this can't work... My current code looks like this:
<div id="header">
<div id="content">CONTENT HEADER</div>
</div>
<div id="content">
<div id="column-left">
<p>INHOUD LINKER KOLOM</p>
<p> </p>
</div>
<div id="column-right">
<p>INHOUD RECHTER KOLOM</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="content">
<div id="main-content">
<p>HOOFD INHOUD </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="content">CONTENT FOOTER</div>
</div>
With as CSS the following:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.clear {
clear: both;
}
#content {
position: relative;
width: 950px;
margin-left: auto;
margin-right: auto;
z-index: 10
}
#header {
position: relative;
min-width: 990px;
width: 100%;
height: 90px;
background-color: #F00;
}
#column-left {
width: 500px;
float: left;
background-color: #0F0;
}
#column-right {
width: 450px;
float: right;
background-color: #00F;
position: absolute;
margin-left: 500px;
}
#main {
min-width: 990px;
width: 100%;
background-color: #FF0;
}
#main-content {
width: 500px;
float: left;
}
#footer {
min-width: 990px;
width: 100%;
height: 90px;
background-color: #F00;
}
In my example you will see that I made the 'blue' div's content longer whereas I would like to have the 'yellow' div to stretch (so the footer will be below them both)
The other way around would also be applicable (if the 'yellow' div would contain more content, the 'blue' div should stretch... Although this can be solved with faux columns if I give a 'yellow-blue' image as background to the 'blue' div).
An example as image: http://tinypic.com/view.php?pic=jjpx0k&s=6
Can someone help me with this?
Any help would be much appreciated!

Answer 1

I looked at your code and you really can't achieve what you want to do because the blue div is in absolute.
The only way of doing this is by using jquery and detecting the height of the blue div and then adding margin or height to the yellow div to make the space so that the footer appears to be under the blue div...
I hope this helps.