Ho semplificato molto il problema riportato sopra (magari vi passava la voglia di analizzare tutto il codice) (so che lo style non lo dovrei usare(l'ho fatto per comodità)

Con questo codice mozilla e internet explorer (sotto al 7) interpretano le cose in modo diverso perchè??? come fare a risolvere?
AIUTOOOOO!!!

Questo è l'html

codice:
<body>
<div class="tutto">
	<div class="sfondo">
		<div class="f50" style="background-color:#333; color:#FFF;">cicciasx</div>
		<div class="f50" style="background-color:#777; color:#FFF;">cicciadx</div>
		<div class="clear"></div>
	</div>
</div>
</body>
E questo il css

codice:
body {margin:0px;
	text-align:center;
	padding:5px 0px;}
div.clear {clear:both;}
div.f50 {float:left; width:50%}
div.sfondo {background:#FDCFFD; border:10px solid #ff86dc; border-top:none; border-bottom:none;}
div.tutto {width:980px; margin:0px auto; text-align:left;}