Expanding div problem

[samarudge]

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

[pritaeas]

Here's a nice explanation:
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

[Cragdo]

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