Columnas variables de igual altura con div y CSS

Lo que voy a explicarles a continuación es como lograr en XHTML y CSS que cuando coloquemos un div dentro de otro, el div interior tenga la misma altura que el div en el que está contenido. Esto es util para diseños de varias columnas (Como un blog) donde quieran que una textura o color especifico siga creciendo en función del contenido de otra columna.

Pasemos al código del CSS:

Código :

#container {
    background-color: #fff;
    overflow: hidden;
    width: 780px;
    margin: 10px auto 5px auto;
    border: 1px solid #000;
}
#content {
    background-color: #fff;
    width: 580px;
    border-right: 200px solid #0099FF; /* ancho y color del menú */
    margin-right: -200px;
    float: left;
}
#menu {
    width: 200px;
    float: left;
    color: #fff;
    background: #0099FF;
    text-align: left;
}

Ahora hagamos uso de este CSS en nuestro html:

Código :

<div id="container">
    <div id="content">
        <p>bla bla bla bla</p>
        <p>bla bla bla bla</p>
    </div>
    <div id="menu">
        bla bla bla bla
    </div>
</div>

Lo que hemos hecho es que darle al div #content además de un color específico un borde derecho de 200px y un margen derecho de -200px. ¿Esto para qué? pues para que cuando insertemos el div #menu este se sobreponga en él y el borde finja ser la columna lateral derecha de manera que al aumentar el tamaño del contenido lo lógico pues es que el borde aumentará paralelamente su altura con relación al contenido, lo cual nos servirá para insertar nuestro menú y se vean de igual altura.

Ejemplo

Sencillo verdad?, espero que esto pueda servirles de ayuda.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.