Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in ...
Aquí está un escenario perfectamente normal - dos contenedores uno al lado del otro (típico menú y el contenido). La izquierda está usando un contenedor flotante: a la izquierda debe aparecer el flujo de texto y tiene un ancho de 100px. El derecho es normal en el flujo de texto. Si se mira de cerca, es sorprendente que todas las líneas de IE, directamente al lado de la caja, una vez más se separa por 3 pixels. En la imagen ampliada de la izquierda se ilustra la diferencia.
HTML
<div id="leftbox">
<p>
<a href="#">Entrada 1</a><br>
<a href="#">Entrada 2</a><br>
<a href="#">Entrada 3</a><br>
</p>
</div>
<div id="hierinhalt">
<p>Lorem ipsum dolor sit amet ...</p>
</div>
CSS
#leftbox {
float: left;
width: 100px;
background-color: #f0f0f0;
color: #000;
}
#hierinhalt {
margin-left: 100px;
border-left: 1px solid #333;
background-color: #e0e0e0;
color: #000;
}
/* Reparación para IE */
* html #hierinhalt {
position: relative;
right: 3px;
height: 1%;
}