Columnas de igual alto
Hubo un tiempo en que esto me dió varias horas de preocupación, y muchas más de búsqueda por internet. Necesitaba construir un layout con 2 columnas (pueden ser 3 o más, da igual) pero que todas las columnas tuvieran el mismo alto, o por o menos que simularan tenerlo. Bien, pasado algún tiempo ya me río de la solución, pues ahora la hago en menos de 3 minutos. Con el siguiente ejemplo, aprovecharé de explicar también cómo crear un layout de 2 columnas, y que ambas colunas tengan (aparenten) tener el mismo alto.
Primero que nada, comencemos a construir nuestro layout de 2 columnas. El <body> tendrá un <div> con id #menulateral y otro <div> con id #contenido. Dentro de cada <div>, los ítems del menú (en <ul>) y los del contenido (en este caso un texto simulado en <p>).
<div id="menulateral">
<ul>
<li><a href="#">Item Uno</a></li>
<li><a href="#">Item Dos</a></li>
<li><a href="#">Item Tres</a></li>
</ul>
</div>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc………</p>
</div>
La magia ocurre cuando aplicamos estilos a los <div>. Primero que nada, le doy un ancho a cada columna. Luego, estilo a sus elementos y para que se pongan uno al lado del otro, los flotamos ambos al mismo sentido con float: left.
#menulateral {
width: 150px;
float: left;
background: #F00;
}
#contenido {
width: 450px;
float: left;
}
Bueno, ya tenemos el esqueleto. Pero ahora queremos que el fondo del menu lateral crezca junto con su contenido, para que se vea más uniforme. Para ello, utilizaremos la siguiente técnica: pondremos nuestros 2 <div>’s en otro <div> llamado #contenedor, el que tendrá un ancho determinado, estará centrado en la horizontal y tendrá como background un GIF con el color que elegimos de fondo para #menulateral (este GIF será de 1px de alto por todo el ancho del <div> #contenedor, y se repetirá hacia abajo con background-repeat: repeat-y;). Así, cuando #contenido crezca lo que tenga adentro, hará crecer todo lo que tenga adentro, incluyendo el GIF con el fondo del #menulateral.
Sigue el código HTML y luego el CSS:
<div id="contenedor" class="clearfix">
<div id="menulateral">
<ul>
<li><a href="#">Item Uno</a></li>
<li><a href="#">Item Dos</a></li>
<li><a href="#">Item Tres</a></li>
</ul>
</div>
<div id="contenido">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipiscing………</p>
</div>
</div>
#contenedor {
width: 600px;
background: url(imgs/fondo.gif) left top repeat-y;
border: 1px solid red;
margin: 10px auto;
}
#menulateral {
width: 150px;
float: left;
}
#contenido {
width: 450px;
float: left;
}
Por último, le agregué la class "clearfix" a #contenedor para que los <div>’s crezcan junto al contenedor, tal como expliqué en el artículo Flotando en la Incertidumbre.
Ver ejemplo final (view source para el código completo).
