Hi,
I have a page with four primary DIVS layed out like:
http://wp-media.samrudge.co.uk/2010/01/1.png
using the CSS

body{
	background-color:#CCC;
}
#container{
	width:300px;
	height:auto;
	background-color:#00F;
	padding:10px;
}
#header{
	width:300px;
	margin:5px auto;
	background-color:#0FF;
	font-size:24px;
}
#left{
	width:200px;
	height:auto;
	background-color:#90F;
	float:left;
}
#right{
	width:100px;
	height:auto;
	background-color:#CF0;
	float:right;
}
#footer{
	width:300px;
	background-color:#0F0;
	float:none;

Using the HTML

<div id="container">
<div id="header">I am a header</div>
<div id="left">Left Column</div>
<div id="right">Right Column</div>
<div id="footer">I am a footer</div>
</div>

However when I add more content to eather the left column or the right column they overlap the footer
http://wp-media.samrudge.co.uk/2010/01/2.png
http://wp-media.samrudge.co.uk/2010/01/3.png
How can I make it so that the footer and container divs expand to fit the height of whichever is the longer div?
Thanx,
Sam

Hi,

You need to clear the footer div of the left and right floats in the left and right columns.

#footer{
        clear:both;
	width:300px;
	background-color:#0F0;
}

The overlap happens because when you apply float to a div it removes that div from the Document flow hence the name float.

Cheers