Saludos maestros, me ando inciando en esto del CSS y estoy practicando un esquema pero por más vueltas que le doy simple y sencillamente no se le da la gana de quedar, he aquí mi cuestión:
En el centro de la página deseo que aparezca un layer de 800 pixeles de ancho y debajo de est otros dos de 400 pixeles de ancho cada uno, tal y como se muestra en la siguiente ilustración:
A continuación los estilos:
Cita: .arriba{
position: relative;
width:800px;
height:90px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid #788DA2;
background-color : #788DA2;
margin: 0px;
}
.izquierda{
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: red;}
.derecha{
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: blue;}
Y el HTML
Cita: <center>
<div id="cabeza" class="arriba"></div>
<div id="izquierda" class="izquierda"></div>
<div id="derecha" class="derecha"></div>
</center>
Pero a lo más que he logradio es que quede así
:
Alguien me podría hechar una manita? agradezco desde ahora cualquier ayuda.
Saludos.