DIV Position

Well, I gave pure CSS a crack on my current site. I'm stuck though.

I have a container div, and then 2 columns inside the container, one set to float left and the other float right. Somehow when the columns expand vertically, they don't push the container div's bottom border down, but rather just over ride it. How do I fix this?

div#outer{
	width:780px;
	border:5px solid #633e17;
}
div#left{
	float:left;
	width:443px;
	border:1px solid #80ae35;
}
div#right{
	float:right;
	width:336px;
	border:1px solid #80ae35;
}

Code (markup):

 

You have clear the floats within the container, so do something like this:

<div id='outer'>
<div id='left'>
</div>

<div id='right'>
</div>

<div style='clear:both'></div>
</div>