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 tendrá un

con id #menulateral y otro
con id #contenido. Dentro de cada
, los ítems del menú (en
    ) y los del contenido (en este caso un texto simulado en

    ).



         

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipisc………


    La magia ocurre cuando aplicamos estilos a los

    . 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

    ‘s en otro
    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
    #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:


         
         

              

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ut risus hendrerit sem adipiscing………


         

    #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

    ‘s crezcan junto al contenedor, tal como expliqué en el artículo Flotando en la Incertidumbre.

    Ver ejemplo final