En un diseño a dos columnas, donde las columnas son dos elementos flotados a izquierda y derecha a menudo nos encontramos con que al crecer las columnas porque se les introduce contenido, el contenedor no engloba a los elementos que tiene en su interior.

Si nuestro contenedor tiene por ejemplo un fondo resulta que al alargar las columnas, no se ve dicho fondo. Esto ocurre en Firefox pero no en Explorer 6. Y ocurre porque por definición un objeto flotante “se saca del flujo del documento”, es decir, no ocupan espacio y por tanto no se pueden encontrar dentro de elementos contenedores. Con una excepción que los contenedores sean a su vez elementos flotantes, pero esto nos origina a su vez restricciones importantes, y nos obliga a flotar todo el diseño (que no tiene porque ser lo que queremos).

La solución que he encontrado a este problema la he sacado del libro “CSS”, un manual Anaya multimedia que es una de las mejores formas de comprender paso a paso la metodología de la programación CSS que responde a una lógica que hay que entender si no quieres que los diseños hagan lo que ellos quieran y no lo que tú quieras que hagan. La solución en cuestión es añadir un div vacío, que no flota y que hace que el contenedor pase a englobar los dos elementos flotantes. La forma de hacer que este elemento vacío actúe de este modo, y deje un espacio, es aplicarle la propiedad “clear: both”. No tiene porque ser un elemento vacío si disponemos de un elemento al final de la página que nos evite el problema.

De forma sencilla, os pongo el ejemplo del libro, para que lo veáis más claro:

Y el código html