Igualar la Altura de Varias Columnas CSS

Al pasar de trabajar con tablas a un maquetado CSS quizá nos topemos con problemas como este al momento de organizar los elementos de nuestra página.

Supongamos un diseño sencillo a 2 columnas, la de la izquierda es el menú (vertical) y la de la derecha es el contenido principal:

...

Generalmente el contenido tiene una altura mayor al del menú, la técnica consiste en "simular" que la altura del menú es igual a la del contenido, de la siguiente manera:

#contenedor{
    margin: 0 auto;
    width: 600px;
}
#contenido{
    border-left: solid 200px #DFDFDF; // acá simulamos la altura del menú
    position: absolute;
    width: 400px;
}
#menu{
    background: #DFDFDF;
    margin-left: 400px;
    position: absolute;
    width: 200px; // debe tener el mismo ancho que el borde del contenido
}

Saludos y que lo disfruten!

Bookmark and Share

0 comentarios:

Publicar un comentario