CSS, Capas y Alturas...

Uno de los grandes problemas de maquetar con css usando capas se nos plantea cuando tenemos un layout de 2 columnas (dentro de un container) y una de estas crece mucho y se nos sale del container...



Tenemos este escenario: una pagina con 3 capas: un container, y dentro dos columnas, algo sencillo:

El css...
div#container {
border: 1px solid green;
overflow: hidden;
}

div#menu {
border: 1px solid red;
float: left;
width: 10%;
}
div#contenido {
border: 1px solid blue;
float: right;
width: 88%;
}

El codigo HTML...
<div id="container">
<div id="menu">
Bloque izquierdo
</div>
<div id="contenido">
Bloque derecho
</div>
</div>

El problema radica que si fijamos una altura de 100%, este valor da al elemento una altura del total de pixeles que tiene la pantalla, sin embargo, nuestro contenido puede ser mayor que esta altura, por lo que el contenido se saldrá de la capa.

Este problema lo solucionariamos con la propiedad overflow que nos permite ser mas flexibles con las capas, estableciendo que pasará si su contenido sobrepasa la capa. Esta propiedad tiene 4 valores:

overflow: [visible|hidden|scroll|auto]

* Visible: El contenido se saldrá de la capa si crece mas que esta
* hidden: El contenido se insertará dentro de la capa y no saldrá fuera de esta sin mostrar barras de desplazamiento.
* scroll: Lo mismo pero mostrando las barras de desplazamiento.
* auto: Se mostrarán barras de desplazamiento solo si el contenido es insertado dentro de la capa.

Por lo tanto, si en la capa principal fijasemos esta propiedad, el contenido creceria tanto como quisiese sin tener que preocuparnos por que se salga de la capa. Sin embargo, en Internet Explorer (como no) esto no es asi, ya que, como se ve en la imagen, cuando el bloque izquierdo crece, se sale del contenedor, sin hacer caso a la propiedad overflow que habiamos fijado.

Para solucionarlo, basta con añadir la propiedad height a la hoja de estilos, quedando la etiqueta container del siguiente modo:

div#container {
border: 1px solid green;
height: 100%;
overflow: hidden;
}

No he podido probar la compatibilidad de esta solucion en otros navegadores como Opera, Konqueror o Safari, a ver si lo pruebo pronto, pero en Firefox e IExplorer funciona perfectamente.