Sto guardando il mio codice da 1h e non ne vengo a capo ... non trovo l'errore.

Codice CSS
codice:
html,body {
	color: #000000;
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-align: left;
	margin: 0px;
}	

#container{	
	clear: both;
	width: 100%;
	background-color: Aqua;
}

#container #newOrder{
	margin-left: 5px;
	margin-top: 5px;
	width: 150px;
	border-width: 	1px;
	border-style: 	solid;
	border-color: 	#575757;
	background-color: Green;
	float: left;	
	clear: both;
}

#container #treeFilter{
	margin-left: 5px;
	margin-top: 5px;
	width: 150px;
	border-width: 	1px;
	border-style: 	solid;
	border-color: 	#575757;
	height: 400px;
	background-color: Maroon;	
	float: left;	
	clear: left;
}

#container #dataPanel{		
	height: 250px;
	background-color: Blue;
	width: 83%;
	margin-left: 10px;
	margin-top: 5px;	
	float: left;	
	clear: right;
}
codice HTML

codice:
<div id="container">
	<div id="newOrder">rew</div>
	<div id="treeFilter">rwe</div>	
	<div id="dataPanel">rwe</div>
</div>
questo è il risultato

http://delfinablue.interfree.it/prova.html

Il box verde e il box blu dovrebbero essere allineati, mentre ora il box blu è allineato a quello marrone.
Con IE 6 la visualizzazione è corretta, con FF no.
Cosa mi sta sfuggendo?

Grazie