Columnas de igual alto

2/mar/2007 11

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;
}

Ver este ejemplo

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

Comentarios

  1. Pedro Rogério [#]

    Gracias hermano!!!

  2. Pablo [#]

    jeje.. creo que aquellos que nos dedicamos a la web pasamos por esto alguna vez.
    Más de una vez me desvelé por internet buscando una forma de mostrar un mismo alto a dos columnas.

  3. Toni [#]

    Muchas gracias por el articulo tan claro, me ha venido como anillo al dedo. Salud.

  4. oceane [#]

    Gracias …LLevó tiempo buscando la forma de obtener el mismo resultado sin usar javascript.
    Saludos desde Barcelona …

  5. Monica [#]

    uhm, es una solucion pero no la que buscaba, solo funciona si le aplicas el color o la imagen al contenedor, pero ¿y si quieres hacer tres columnas independientes de igual alto? estoy mareada de dar vueltas y no encontrar nada :(

  6. CSSLab Admin [#]

    monica, el metodo q utilice (Faux Columns) implica una, dos, tres o las columnas q quieras, siempre y cuando puedas darle con una imagen de fondo los bordes o colores q estimes mejor para tu diseño. otra solucion independiente del contenedor o una imagen de fondo, ya la menciono oceane: utilizando javascript. saludos.

  7. Monica [#]

    OK muchas gracias miraré esta solución entonces porque esta que das está muy bien, la verdad, pero no me sirve.

    Por cierto tienes un blog muy bueno!!

  8. CSSLab » menúes y la class .selected [#]

    […] Columnas de igual alto […]

  9. Esteban [#]

    Funciona tanto para Opera como para Firefox? creo que no :S

  10. Jorge Epuñan [#]

    Esteban, si funciona. Es una técnica muy limpia q no tendras problema alguno de implementación cross-browser.

  11. Yadir Gómez [#]

    Muy bueno me ayudo mucho! gracias, andaba buscando esto hace tiempo

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab