Error de la propietat float en IE

Error de la propietat `float` en IE

Publicat el 22/03/2004

Al fer una estructura de dues columnes utilitzant un float, l'ie genera un margin extra de 3px a la zona de "contacte" amb les caixes inline.

L'exemple pot ser el següent:


<div id="esquerra">
   Aquest div està en float
</div>
<div id="contingut">
   Aquest div conté caixes inline tipus text
</div>

Hi vinculem un CSS tipus:


div#esquerra {
   float: left;
   width: 150px;
   }
div#contingut {
   margin: 0 0 0 150px;
   }

D'aquesta manera apareix l'esmentat margin extra (la regla margin no és necessaria).

Si afegim un width al div#contingut solucionem el margin.

Nota: Si poseu un width: 100% redefiniu-lo després en width: auto per la resta de navegadors.