Strano comportamento di IE8 con div e float

[gpalmia]

Ciao a tutti.
Ho un piccolo problema che non riesco a risolvere.
vorrei semplicemente inserire due elementi div all'interno di un altro che faccia da contenitore così...:

<div id="corpo">
<div id="colsx">
	

Colonna di sinistra</p>
</div>
<div id="coldx">
	

Colonna di destra</p>
</div>
</div>

il tutto è molto semplice e l'unica cosa che vorrei è che i due elementi div interni siano allineati orrizzontalmente uno a destra e l'altro a sx.
Ho così creato il file css con questo codice

div#colsx {
	border: thin #C0C0C0 solid;
	background-color: #00FFFF;
	margin: 2%;
	width: 30%;
	float:left;
}

div#coldx {
	border: thin #C0C0C0 solid;
	background-color: #00FFFF;
	margin: 2%;
	width: 30%;
	float:right;
}

div#corpo {
	border: thin solid #C0C0C0;
	width: 90%;
	margin:0 auto;
	background-color: #FFFF00;
}

Bene: uso MS SharePoint Designer e nella finestra che mostra il risultato del codice (WYSIWYG) gli elementi vengono visualizzati proprio come vorrei.
Se però provo a visualizzare la pagina con IE8 il risultato è molto diverso.
In particolare si visualizza il div#corpo come una linea (cioè senza contenuto) e gli altri due elementi sotto fuori da quello che dovrebbe essere il loro contenitore.
Perchè succede ciò?
Grazie per la risposta.