CSS: Float y overflow

Acostumbrando al cuerpo en el uso de CSS nos encontramos con pequeños problemas que intentamos resolver de la mejor manera -conocida-. En este caso el problema viene por el uso de la propiedad float.

Usando float

Habitualmente el uso de float se centra en partes del contenido (bloques de texto, imágenes, menús...) que pretendemos alinear a uno u otro lado dejando invariante el resto de la página (flotantes). El uso de esta propiedad es sencillo, solo tenemos que indicar si queremos que flote a la derecha, izquierda o simplemente que no flote:

	.divFlotante
	{
		float: left;
		float: right;
		float: none;
	}

Ejemplo

El problemaa asoma cuando juntamos varios float dentro de una misma página. Supongamos uno a cada lado formando una composición con menú y contenido, algo así:

<style>
	#Contenido {border: 2px solid black; background-color:#dedede;}
	#Izquierda {float: left; width:350px; border: 1px solid blue}
	#Derecha {float: right; width:150px;  border: 1px solid red}
</style>

<div id="Contenido">
	<div id="Derecha">
		<ul>
			<li>Opción1</li>
			<li>Opción2</li>
			<li>Opción3</li>
		</ul>
	</div>
	<div id="Izquierda">
		Lorem ipsum dolor sit amet, consectetuer...
	</div>
</div>

Como vemos, las propiedades de #Contenido no se aplican correctamente por el uso de float en su interior. El borde de 2px en color negro debería contener nuestros 2 divs flotantes pero no lo hace. Este es un problema típico que podríamos resolver con algún que otro br o poniendo propiedades extrañas (min-height...). Y digo extrañas porque Internet Explorer no las reconoce.

Solución

La solución a este caso es sencilla, añadiendo un simple overflow:hidden a #Contenido conseguiremos el efecto deseado y podremos seguir con la maquetación de nuestro ejemplo:

<style>
	#Contenido {overflow:hidden; border: 2px solid black; background-color:#dedede;}
	#Izquierda {float: left; width:350px; border: 1px solid blue}
	#Derecha {float: right; width:150px;  border: 1px solid red}
</style>

<div id="Contenido">
	<div id="Derecha">
		<ul>
			<li>Opción1</li>
			<li>Opción2</li>
			<li>Opción3</li>
		</ul>
	</div>
	<div id="Izquierda">
		Lorem ipsum dolor sit amet, consectetuer...
	</div>
</div>

En definitiva

Estos trucos son los que demuestran que para maquetación y diseño web, CSS es un gran aliado dejando a un lado las siempre tediosas y pesadas tablas. Por un mundo sin tablas.