Ayuda con estas capas

[tempto]

No te funciona porque a la clase contentLayout le estás cambiando los estilos, empieza con width:898px y acaba con 224px

Prueba a hacerlo de esta forma

Código HTML:

<div id="pagina">
 
    <div id="cabecera">
    </div>
    
    <div id="contenido">
        <div id="capa0">
        </div>
        <div class="capa1">
        </div>
        <div class="capa1">
        </div>
        <div class="capa1">
        </div>
    </div>
    
    
    <div id="capa2">
    </div>
 
</div>
 

El html es parecido al tuyo, sólo que aquí creo una capa que contiene a capa0 y capa1. Ahora el css

Código CSS:

* {
    margin:0;
    padding:0; /*Resetear margin y padding para todos los navegadores*/
}
 
#pagina { /*Contiene la página completa*/
    width:800px; /*El ancho que queremos que tenga*/
    margin:auto; /*Para centrarla*/
}
 
#cabecera {
    height:200px;
    background-color:#09F;
}
 
#contenido { /*Dentro estará capa0 y las capa1*/
    width:600px;
    height:500px;
    float:left;
}
 
#capa0 {
    width:600px;
    height:500px;
    background-color:#099;
    float:right;
}
 
.capa1 {
    width:200px;
    height:100px;
    background-color:#096;
    float:left;
}
 
#capa2 {
    width:200px;
    height:600px;
    background-color:#06F;
    float:right;
}
 

Cuando les añadas contenido puedes quitar la altura de las capas, ahora como no tiene contenido se la he puesto para que se vean. Espero que pueda ayudarte