Columnas ocupando toda la altura del documento no del navegador

[Lord_Doomy]

Buenas, a ver el reto que tengo entre manos es un poco peliagudo, me han pasado un diseño a ver si lo puedo llevar a la práctica y quisiera hacerlo sin recurrir a javascript, osea todo en css y html.

Bueno la cuestión es una página de 3 columnas, una central fija y dos laterales líquidas, el detalle es que las dos columnas de los lados no son iguales ya que tienen fondos distintos, pero el problema que me ha surgido es que si la columna central crece mucho las de los lados se mantienen al tamaño del navegador no del documento.

Ya he probado muchas maneras y se me escapa el cómo hacerlo.

Como sé que esto es mejor verlo que describirlo voy a poner un enlace al archivo que estoy creando.

Lógicamente está sin acabar y sin imágenes que puedan llevar problemas.

P.D.: El diseño no es mío, osea que tiene que ser así o así, la cuestión es cómo llevarlo a cabo.

Enlace: https://dl.dropboxusercontent.com/u/2383381/3columnas.zip

[C2am]

Busca columnas equilibradas css

Existen varias formas de lograrlo.

Saludos

[Lord_Doomy]

El problema reside que con la distribución que tengo no funcionan la mayoría de soluciones que se aportan por ahí (no las he probado todas pero casi).

Al final lo he conseguido con javascript, pero no era la idea que tenía.

Por si alguien quiere saber como en javascript -> http://jsfiddle.net/cristian_cena/DM23A/

[JhonErick]

usando la función calc de de css de seguro lo hubieses echo
por ejemplo
id1 liquida
id2 width 400px columna central
id3 liquida

CSS

Código CSS:

#id1, #d3{
   width:calc(50% - 200px - px margenes);
}
 

a te recomiendo que coloques min-width o mejor con mediaquery para que después de un determinado tamaño las columnas ocupen todo el ancho de la pantalla.
esto para cuando el usuario tiene muy reducido el ancho de la pantalla Saludos :)