Ho un div che contiene una lista:

codice:
<div class="cont">
	<ul id="articolo">
		<li class="sinistra">
		[img]images/articoli/sezioni.png[/img]
		<li class="centro">
		fghfghhghghfgh

		gdfgdfg

		

		

		

		

		

		

		

		dfgdfgdfgdfghdf
		<li class="destra">destra 
	[/list]
	</div>
IL CSS è

codice:
.cont {
margin: auto !important;
width: 960px !important;
border-top: 5px solid #e3e3e0;
border-bottom: 5px solid #e3e3e0;
}
ul#articolo {
	width: 100%;
	margin: 0px auto;
	list-style-type: none;
	display: block;
	text-align: left;
}
ul#articolo li { 
	display: inline;
	float: left;
}
.sinistra {
	width: 295px;
}
.centro {
	width: 385px;
}
.destra {
	width: 280px;
}
Il problema è che in Opera e Firefox il contenuto della lista esce dai margini del div che lo contiene, mentre in internet explorer no.
In pratica ho disposto la lista in orizontale ma il contenuto del li si estende anche inverticale; come risolvere il problema? Grazie