floating divs that fill space until cleard divs

Question

To get an idea of what the hell I'm on about, please go Here and Here

As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.

Height on the sidebar and content are not set so the divs grow!

However, you can see that if one floating div is bigger than the other, the the background image appears.

I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony

Thanks

Answer 1

What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.

What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.

Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.

Answer 2

display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.

Or, you could always use the infamous Faux Columns