Ayuda con estas capas

[el_tigre]

Amigos quiero hacer mi página con esta pero mi CSS no funciona



este es mi CSS

Código PHP:

  .contentLayout
{
  margin-bottom: 4px;
  width: 898px;
  position: relative;
}
 
.contentLayout .Capa0
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 672px;
}
 
.contentLayout .Capa1
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 224px;
}
 
.contentLayout .Capa2
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  overflow: hidden;
  width: 224px;
} 
   

Y así lo llamo

Código PHP:

  <div class="contentLayout">
      <div class="Capa0">
           Contenido
       </div>
      <div class="Capa2">
          ... Contenido
       </div>
      <div class="Capa1">
          .. Contenido
       </div>
      <div class="Capa1">
          ... Contenido
       </div>
      <div class="Capa1">
          .... Contenido
       </div>
</div> 
   

Algo me falla, no funciona como debe.

[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

[el_tigre]

Excelente solución amigo, funcionando en Firefox y Opera pero en mi IE no anda, la capa 2 se posiciona por debajo de las capas 1......

[el_tigre]

Ah, perdón ya lo logré en todos los navegadores, me faltaba agregar el float a la capa contenedora, muchas gracias.

[tempto]

de nada hombre