El problema

Cuando trabajamos con diseños de página basados en contenedores flotados, mediante la propiedad float, nos encontramos con el problema del div contenedor, éste no se hace tan alto como los div hijos, por lo que éstos no tienen el mismo background que su contenedor principal. Lo vemos claramente cuando queremos poner un borde para poner dentro dos div hijos.

Lo vemos en el siguiente ejemplo.

• Problema al flotar los div

Lo que nosotros queremos es la capa superior contenedor rodee a sus dos hijas. Esto no ocurre porque no tiene una altura definida y como sólo contiene elementos flotados muestra su altura como 0px.

Para Microsoft Explorer basta con asignar un ancho a la capa contenedora para que sí nos muestre el borde alrededor las dos capas interiores.

Solución mediante HTML

Nuestro objetivo es hacer que esto funcione para todos los navegadores.

Hasta ahora conocía una solución que era la de incluir un elemento extra para poder «limpiar» el flujo. Un elemento con el famoso clear: both.

• Solución incluyendo código extra en nuestro HTML

Esta solución es válida pero contraria a la filosofía del diseño de páginas web mediante estándares, porque utilizamos un elemento de contenido para presentación.

Para no perder esta filosofía podíamos introducir la nueva clase en otro elemento que fuese más correcto como un salto de línea o una línea de separación.

Esto tiene que ser así mientras Internet Explorer no acepte la seudo clase after.

Otra solución

Alex Walker nos ofrecía otra solución más simple mediante la utilización de la propiedad overflow.

Esta propiedad controla que el contenido de un div no desborde al div contenedor.

• Solución utilizando la propiedad overflow

Asignando el valor auto a la propiedad overflow, el contenedor se hará tan alto como el de su contenido, para que esta propiedad funcione correctamente en Internet Explorer debemos asignar un ancho al contenedor.

La propiedad overflow

Puede tener 4 valores: visible, hidden, scroll y auto.

El valor que toma por defecto es visible, scroll mostrará las barras de scroll para la capa contenedora siempre, auto sólo las mostrará en el caso en que el contenido sea mayor que un ancho o alto especificado en la contenedora, y hidden ocultará las barras de scroll siempre.

Algunos navegadores como Internet Explorer necesitarán que especifiquemos un ancho o un alto, tal y como lo hemos puesto en el ejemplo.

Para el Explorer Mac debemos utilizar el valor hidden, así no mostrará las barras de scroll.

• Una solución para Mac

Referencias

Este método no es ni nuevo, ni mío, pero he considerado interesante dejarlo por escrito aquí, así espero que os sirva. Las referencias donde encontrareis más, y mejor, información son estas.

• Overflow and clipping
• Clearing floats
• Simple Clearing of Floats

Publicado mas o menos el 22 de marzo de 2006 a las 3:45 pm por César García Gascón, archivado en las categorías CSS y etiquetado cómo código, CSS. Siéntete libre de comentar un poco más abajo si quieres.