Como consigo esta estructura de capas?

[cristian_cena]

Prueba con esto:

Código HTML:

<div class='tarea'> 
    <div class='rojo'>div 1</div>            
    <div class='verde_celeste'> 
        <div class='verde'>div 2</div>    
        <div class='celeste'>div 3</div>       
    </div>          
    <div class='amarillo'>div 4</div> 
</div>
 

Código CSS:

body{
    font-family: Arial;
    font-size: 14px;
}
    .tarea{
        overflow: hidden;
        width: 700px;
        border: 5px solid #000;
    }
        .tarea div{
            text-align: center;
            text-transform: uppercase;
        }
        .rojo, .verde_celeste, .amarillo{
            float: left;
            height: 200px;
            line-height: 200px;
        }
        .rojo{
            width: 300px;
            background: #ed1c24;
        }
        .verde_celeste{
            width: 190px; /* + (5*2 = 10px) = 200px*/
            overflow: hidden;
            border-left: 5px solid #000;
            border-right: 5px solid #000;
        }
            .verde, .celeste{
                float: left;
                line-height: 100px;
            }
            .verde{
                width: 200px;
                height: 100px;
                background: #22b14c;
            }
            .celeste{
                width: 200px;
                height: 95px; /* + 5px = 100px */
                border-top: 5px solid #000;
                background: #00a2e8;
            }   
        .amarillo{
            width: 200px;
            background: #fff200;
        }
 

Luego le das las medidas acorde a tus necesidades.

demo: http://jsfiddle.net/cristian_cena/9HQHm/
float: http://www.librosweb.es/css/capitulo...nto_float.html
limpiar los float: http://www.librosweb.es/css_avanzado...ar_floats.html

Espero te sea útil.
Saludos.

pd:/ No sirve que pongas "Alguien sabe? ^^". Lo único que logras con eso es que den ganas de saltear tu tema.