El objetivo es conseguir poner dos DIVs en una web, uno al lado del otro (por ejemplo un menú y el contenido), con colores de fondo distintos y que los dos queden con la misma altura. El caso más normal es que el menú queda más corto, por lo que se dejaría sin rellenar la parte inferior (hasta que apareciera el pie).
He encontrado en Internet 2 posibles soluciones:
La primera consiste en emular una tabla con la propiedad "display". Necesitaremos un DIV para la tabla (display:table), un DIV para la fila (display:table-row) y luego en cada columna añadimos el atributo display:table-cell. El ejemplo lo podemos ver aquí.
La segunda consiste en añadir un borde a la columna más alta (que será la del contenido) de la misma anchura y color que el menú. Para un menú a la derecha tendríamos:
#contenido {background-color:red; border-right: 200px solid yellow}
#menu {background-color:yellow; float:right; width:200}
El problema de esta solución es que si por alguna razón el menú es más alto, no quedaría bien. Fuente aquí.