Il contenitore non si allunga in base ai div contenuti

[robyonrails]

Ecco l'xhtml

	<div id="container">

                ..................

		<div id="footer">
			<div id="fleft">
				copyright
			</div>
			
			<div id="fright">
				contact
			</div>
		</div>

	</div>

E questo è il CSS corrispondente

#container{
	margin-left:20px;
	margin-right:20px;
	background-color:#ededed;
	border-top:3px solid #000790;
	border-bottom:3px solid #0A5B06;
}

#container #footer{
	clear: both;
	background-color:#1CB115;
	padding:4px;
}
	
	#footer #fleft{
		float:left;
		width:45%;
		margin:3px;
	}
	
	#footer #fright{
		float:right;
		width:45%;
		margin:3px;
	}

Ecco, le scritte "contact" e "copyright" appaiono sotto il bordo inferiore di #container. Inoltre, mi ritrovo il #footer ad avere altezza zero (dato che i div interni non sembrano contenuto!).

Come posso sistemare?

p.s.: questo comportamento è visibile in firefox (negli altri non ho provato)