Foros del web, para los que viven de bits

Hola a todos, este es el problema:

<div id="container">
<div id="head"></div>
<div id="body">
<h1>TITULO</h1>
<div id="LATERAL"></div>
<div id="text">
<p>TEXTO</p>
<div style="clear:both"></div>
</div>
</div>
</div>

BODY {font-family: Verdana, Arial, Helvetica, sans-serif;font-size:12px; font-stretch:expanded; margin: 10px; text-align: center; background: #F5F9E2 url(image/bg.png) no-repeat top scroll;}

h1{font-stretch: extra-expanded; text-align:left; margin:0px; font-size: 25px; height:35px; padding:20px;background: url(image/bg-h1.jpg) no-repeat left}

#container {text-align: left; margin: auto; width:840px; height:auto; padding:0px; z-index:1}

#head{width:840px; height:255px; padding:0; background: url(image/head.png) no-repeat top scroll}

#body{ margin: 10 0 10 0px;background-color: #D9E57F;border-left:#677515 solid 1px; border-right:#677515 solid 1px;}

#LATERAL{width: 160px; height:auto; background-color:#B5C653; float:right;padding:14px; font:12px; font-stretch: extra-expanded;}

#text{padding: 14px}

En Firefox todo perfecto! pero en IE los márgenes (de las float) son más grandes de la unidad escrita! Porque?

Muchísimas gracias!

Hola, he econtrado por fin la solución:
Poniendo un simple display: inline se arregla el dobel margin de IE.

Espero que esto pueda ayudar.