Estructura en capas

[Bravenap]

Muy buenas. Qué facil era todo con tablas (), pero hay que adaptarse a los estándares y dale al CSS...

Bueno, la cuestión es la estructura de un sitio organizado con capas. La plantilla base para todo el sitio la tengo desarrollada y se ajusta bien. Partiendo de esta plantilla base, a una página determinada (la principal ni más ni menos) le quiero añadir nuevas capas para estructurar tres nuevas columnas y ahí es donde se me descuadra todo.

Lo primero el CSS de estructura:

Código CSS:

/*ESTRUCTURA GENERAL*/
 
#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;}
#contenido #contenedorInterno { float: left; width:100%; clear: both; display: block;}
#contenido #colIzquierda { float: left; margin-left: -100%; width: 150px; padding-right: 5px; border-right: solid 1px #CCCCCC;}
#contenido #colContenido { float: left; padding: 0 0 0 5px; margin: 0 230px 0 160px;}
#contenido #colDerecha { float: right; border-left: solid 1px #CCCCCC; margin-left: 5px; padding-left: 5px; width: 200px; position: relative;}
#contenido #cierreColContenido{  /*float: left; clear: both; width: 200px; min-width: 150px;*/}
 
#pie { clear: both; text-align: center; margin: 10px auto 2px auto;}
 

La página base (simulada con tablas sería):

Código HTML:

<table width="100%">
        <tr>
            <td height="85" id="cabecera">Cabecera (100% ancho x 85 px alto)</td>
        </tr>
        <tr>
            <td id="contenedorMedio">
                <table width="100%">
                    <tr>
                        <td width="190" id="menuNav">Menú (190 px ancho)</td>
                        <td id="contenido">Contenidos</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Pie (100% ancho)</td>
        </tr>
    </table>
 

Y la que se descuadra debería tener tres columnas dentro de la capa contenido:

Código HTML:

<table width="100%" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td height="85" id="cabecera">Cabecera (100% ancho x 85 px alto)</td>
        </tr>
        <tr>
            <td id="contenedorMedio">
                <table width="100%">
                    <tr>
                        <td width="190" id="menuNav">Menú (190 px ancho)</td>
                        <td id="contenido">
                            [B]<table id="contenedorInterno" width="100%" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td id="colIzquierda" width="150">Columna Izquierda (150 px ancho)</td>
                                    <td id="colContenido">Columna Contenido</td>
                                    <td id="colDerecha" width="200">Columna Derecha (200 px ancho)</td>
                                </tr>
                            </table>[/B]
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Pie (100% ancho)</td>
        </tr>
    </table>
 

colContenido se me desplaza para abajo hasta que acaba colDerecha.

Gracias de antemano y un saludo.