I can't think of possible way to solve this one, so I want to ask the CSS gurus out there for an advice:
I have 2 equal columns, no biggie I've done this before thanks to Matthew.
Problem is that this time the columns are made of several boxes each. So there is no single column that has a background color and that's it, I need to actually make sure the child elements fill 100% height.
Here is a brief description in code (I didn't implement Matthews method to avoid confusion, just presented the structure):
<div class="box">login goes here</div>
<div class="box stretching">news go here</div>
<div class="box">ad goes here</div>
<div class="box stretching">content goes here</div>
<div class="box">footer goes here</div>
I think a good way would be to designate one box in each column as the "stretching" box, and have it stretch to 100%, other boxes will have fixed height and positioned absolutely in the padded areas of the columns.
But the containers stretch to fit the content, so a child element with 100% height just wont fill the gap.