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:

Ver como Texto PlanoImprimir?

1. <div id="contenedor">    <div id="menu">...</div><div id="contenido">...</div></div>  

    
...
...

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:

Ver como Texto PlanoImprimir?

1. #contenedor{  
2.     margin: 0 auto;  
3.     width: 600px;  
4. }  
5. #contenido{  
6.     border-left: solid 200px #DFDFDF; // acá simulamos la altura del menú  
7.     position: absolute;  
8.     width: 400px;  
9. }  
10. #menu{  
11.     background: #DFDFDF;  
12.     margin-left: 400px;  
13.     position: absolute;  
14.     width: 200px; // debe tener el mismo ancho que el borde del contenido  
15. }  

#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!