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