Como consigo esta estructura de capas?

[silvia_net]

Quiero conseguir mediante CSS una estructura tal que así:



El codigo que tengo es este:

Código PHP:

  <div class='tarea'>
    <div class='titulo_tarea'>
                
    </div>
                
    <div class='fecha_anadida_tarea'>
                
    </div>
                
    <div class='fecha_entrega_tarea'>
                
    </div>
                
    <div class='ver_tarea'>
                
    </div>
</div> 
   

Y el CSS:

Código PHP:

  .tarea{
    margin: auto;
    width: 950px;
    height:100px;
    border: 1px solid #CCC;
    margin-bottom: 20px;
    background-color: white;
    padding-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    text-align: justify;
    
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
 
.titulo_tarea{
    height: 100px;
    background-color: red;
    width: 700px;
    float: left;
}
 
.fecha_anadida_tarea{
    height: 50px;
    background-color: green;
    width: 120px;
    float:left;
}
 
.fecha_entrega_tarea{
    height: 50px;
    background-color: blue;
    width: 120px;
    float:left;    
}
 
.ver_tarea{
    height: 100px;
    width: 100px;
    background-color: yellow;
} 
   

[silvia_net]

Alguien sabe? ^^

[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.

[kseso?]

Por lo que se desprende del marcado html no estaremos ante unos bonitos datos presentados de forma estructurada en una matriz común y similar para el total de ellos?
Vamos, lo que siempre se llamó tabla.
Si es así, estaría totalmente justificado (y sería lo correcto) utilizar una tabla.

N.B.: suscribo la observación de Cristian sobre el "Alguien sabe? ^^"

[cristian_cena]

totalmente de acuerdo, a los datos tabulares tablas. Es más, considerando que display:table es ie8+ supongo que pronto será hora de usarlo, para crear layout, columnas. no se que opinan ustedes.

[silvia_net]

Gracias Cristian y perdon por el doble post u.u

Respecto a las tablas, prefiero usar div siempre que pueda, y en este caso me interesaba ese montaje con div, pero gracias :D