Diseño a 3 columnas dentro de otra columna

[Bravenap]

Muy buenas. A vueltas con el diseño a varias columnas de contenido líquido.
La idea es la siguiente:

------- Cabecera ------
Menú -- Contenido --
----------- Pie ----------
Para eso uso este CSS:

Código:

#cabecera {background-position: left top; background-repeat: no-repeat; padding-left: 300px;
    height: 85px;}
#contenedorMedio { float: left; width:100%; clear: both; display: block;}
#menuNav { float: left; margin-left: -100%; width: 190px; padding: 15px 3px 15px 2px;
    background-repeat: no-repeat;}
#contenido { margin: 0 0 0 190px; padding: 10px 20px 0 20px; background-color: #FFFFFF;}
#pie { clear: both; text-align: center; margin: 10px auto 2px auto;}

Y su HTML:

Código:

        <div id="cabecera"></div>
        <div id="contenedorMedio">
            <div id="contenido"></div>
        </div>
        <div id="menuNav"></div>
        <div id="pie"></div>

Ahora quiero que la capa "contenido" se divida a su vez en 3 columnas, izquierda de 150 px, central ajustable con, por ejemplo, 150px mínimo, y derecha 150px. Pero después de miles combinaciones se me sigue desvariando:
El CSS:

Código:

#contenido #colDerecha { float: right; width: 150px; padding-left: 10px; border-left: solid 1px #CCCCCC;}
#contenido #colIzquierda { float: left; width: 150px; padding-right: 5px; border-right: solid 1px #CCCCCC;}
#contenido #colCentro { margin-left: 150px; margin-right: 250px; padding: 0 20px;}

Y su HTML:

Código:

<div id="contenido">
   <div id="colDerecha"></div>
   <div id="colIzquierda"></div>
   <div id="colCentro"></div>
</div>

La derecha y la izquierda cada una a su ladito bien ajustadas pero la central se desplaza hacia abajo hasta donde acaban las otras dos.
¿¿¿? al final le acabaré metiendo una tabla ??

[jomaruro]

Hola:

Consulta la página de Mikmoro www.araudi.net, en concreto Diseño líquido 3 columnas.

Saludos.

[Bravenap]

Gracias jomaruro por responder.

Este ejemplo ya lo había visto pero no me han resultado las pruebas, no sé si porque he pasado algo por alto o simplemente porque las tres columnas (con líquida central) van en una columna previa.

Siguiendo el ejemplo, la estructura HTML debería ser algo así:

Código:

<div id="cabecera"></div>
<div id="contenedorMedio">
  <div id="contenido">
    <div id="contenedorInterno">
      <div id="colDerecha"></div>
      <div id="colIzquierda"></div>
      <div id="colCentro"></div>
    </div>
  </div>
</div>
<div id="menuNav"></div>
<div id="pie"></div>

Si:

Código:

#contenedorInterno {width: 100%;height: 100%;margin:0;}

¿El ancho de 100% será el de toda la página o de la capa contenido?

Gracias y un saludo.