Columnas con la misma altura mediante CSS

Hay veces que las columnas de contenido no quedan a la misma altura, quedando un diseño horrible.

Esto se puede arreglar con Javascript, pero, ¿y si el navegador no tiene activado Javascript?¿Tendré que

recurrir a las tablas? ¡No, puedes aplicar CSS para solucionar este problema!

Haré que los divs tengan la misma altura aunque el contenido de una columna sea mayor que la otra

haciendo que la columna con menos contenido aumente en forma paralela a la otra. El código CSS sería:

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

}

Aplicamos ese código CSS a nuestro HTML, quedando así para poder conseguir las dos columnas:

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

Desmenuzemos lo que hemos hecho:

Hemos aplicado un color específico al div #content además de tener un borde derecho de 200px y

un margen derecho de -200px para que cuando insertemos el div #menu este se situe encima de el

div #content y el borde finja ser una columna lateral derecha, con lo que al aumentar el tamaño

del contenido el borde aumenta paralelamente su altura en relación al contenido así podremos

añadir nuestro menú sin problemas para que se consigan ver a la misma altura. Esta solución es

cross-browser (visualización correcta en todos los navegadores) y su código es válido.