Falsas columnas - Hacer columnas iguales en CSS

Cuando empecé a modificar el PostRev, inaugurado en el post anterior, me topé con un problema que es muy común en la maquetación CSS: Que las columnas (divs) con fondo de color, queden de igual altura cuando una de las columnas tiene un contenido variable.

La página se veía como en el ejemplo 1 y la idea era que quede como en el ejemplo 2.


Renegué un par de días con este tema hasta que encontré googleando la solución y es sorprendente la sencillez con la que está resuelto el problema.

Solución: Agregar un background en el elemento "body" y poner "#menu" y "#principal" en "transparent" todo esto en el archivo CSS.

body
{
...
text-align: center;
background: #xxx url(ruta de la imagen) repeat-y 50% 0;
... }

#menu
{...
background: transparent;
...}

#principal
{...
background: transparent;
...}

Funcionamiento: "repeat-y" hace que la imagen se repita en el fondo solo de forma vertical desde el principio hasta el final de la página, el "50%" se encarga que la imagen quede centrada y "0" indica que la imagen comienza en el píxel 0 de la parte superior del navegador.

Tener en cuenta: Es importante que el cuerpo (etiqueta body) no tenga margen superior ni inferior sino se va a ver el fondo. Lo mismo sucede con la div #header, si tiene margen superior, si es transparente o si el grafico no ocupa toda la capa. Con respecto a la div #footer con que tenga color de fondo o un gráfico que la cubra en su totalidad y tenga la altura de su contenido basta para que no se vea el fondo. Se entendio?

Si bien hay otras formas de hacer esto, esta resalta por su sencillez y simplifica bastante algunos diseños. Para tener en cuenta.

El tip es de Dan Cederholm y lo encontré en www.alistapart.com (inglés) y después encontré una traducción acá.