Con este nombre críptico se esconde uno de mis quebraderos de cabeza que estoy teniendo para maquetar de forma que Internet Explorer 6, 7 y Firefox trabajen de la misma forma.

Imaginemos que tenemos un div que contiene un par de divs con float:left. El problema que nos aparece es que el fondo gris no se estira para recoger los elementos que contiene, ya que los divs internos son flotantes.

Como corregimos ésto? Bién, he dado con la solución!
Editado: Gracias a los comentarios, ahora la solución es mejor!

La forma común

Hasta ahora lo que venía haciendo con Firefox era agregar un elemento HTML justo después del último elemento div interno, antes de cerrar el div contenedor, con un clear:both. La teoría es fácil y funciona: El clear:both se encarga de limpiar de elementos a derecha e izquierda para que el contenedor sepa hasta dónde llega él mismo.

Pero en Internet Explorer 6 y 7 ésto no funciona. El navegador lee el BR pero parece que el clear:both no se aplica. La única forma que encontré era poner dos veces el BR. Así parece que sí que funciona pero por contra nos hace dos saltos de línea, con lo que si teníamos la maquetación cuadrada con tamaños y posiciones, veremos como se descolocan con el nuevo espacio inferior.

La nueva solución

Rebuscando por internet he encontrado la solución que plantean en Quircksmode. Se trata de usar la instrucción overflow junto con un width. El primero soluciona el problema en Internet Explorer 7 y el segundo es para que internamente se llame al hasLayout de Internet Explorer 6:

El problema aquí es el width, porque el resto de navegadores también lo entienden y lo aplican, desmontando la maquetación que teníamos (por ejemplo, un padding).

Entonces, pensando un poco, necesitamos una instrucción que sólo funcione para Internet Explorer 6 y que active su hasLayout... y aquí entra otro truco que he visto en PositionisEverithing, que aunque su método no me gusta nada, usa la instrucción zoom para activar el hasLayout.

Así que la forma que he visto que funciona en los tres navegadores es una fusión de las 3 soluciones: Por un lado mantenemos el BR con el clear:both y además añadimos al DIV contenedor un par de instrucciones CSS para que en los otros navegadores funcione, dejándolo de la siguiente manera:

Editado: He probado la soluciónes de los comentarios y la fórmula que funciona en los tres casos es la siguiente: Añadir al contenedor el binomio overflow y zoom sin el salto de línea con clear:both.

Ala, problema resuelto. Y si estáis cuadrando maquetación entre navegadores... paciencia!

Salu10

Escribe un Comentario