5.1.1.

17 marzo 2005

Bug Internet Explorer: margin-bottom, float y una caja no flotante

Categorí­a

Cuando una caja tiene definido un valor para margin-bottom simplemente debería mover el borde limite superior de la siguiente caja flotante un X valor hacía abajo.

Tenemos tres DIVs dentro del BODY:

  1. Al primero sólo se le definió un margin-bottom de 10px.
  2. El segundo está flotando (no importa el lado) y ocupa el 100% del contenedor.
  3. El tercero no tiene ninguna propiedad en partícular.

También puede lograrse definiendo un ancho para el primer y segundo DIV si la suma de ambos es mayor que el ancho del contenedor.

Todo lo anterior en el mismo orden puede traducirse a CSS como:

div#uno {margin-bottom:10px;}
div#dos {float:left;width:100%}  /* el width:100% es sólo para asegurar que ocurra */
div#tres {}

Lo normal sería que la segunda caja (la flotante) se ubique 10px debajo de la primera (por el margin-bottom) y la tercera sea visible justo donde termina la anterior.

Internet Explorer 5, 5.5 y 6 agregan a la caja flotante un margen inferior equivalente al del elemento anterior. En este caso, #dos tiene magicamente definido margin-bottom: 10px. Ejemplo uno.

Agregadas las soluciones para este bug.

Dato anecdotico: Internet Explorer 4 no sufre de este bug.

Powered by Blogger