Poner capa a lado de otra

Elalux · #1 (**permalink**) 22/03/2008, 23:41

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:

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.

Raulmmmm · #2 (**permalink**) 23/03/2008, 04:00

Sí ponle al izquierda y al derecha un float: left; y agrega una cosa al final. Queda así:

Código:

body{
text-align: center;
}

#contenedor{
margin: 0 auto;
text-align: left;
}

.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{
float: left; 
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{
float: left; 
position: relative;
width:400px;
height:400px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid white;
color:#FFFFFF;
background-color: blue;}

Código HTML:

<div id="contenedor">
<div id="cabeza" class="arriba"></div>
<div id="izquierda" class="izquierda"></div>
<div id="derecha" class="derecha"></div>
<div style="clear: both"></div>
</div>

Por cierto, no te recomiendo usar el <center>, está desaprobado. Sería mejor como te lo he puesto ahora: con un div contenedor.

Y no hace falta que pongas id="cabeza" y luego class="arriba". Puedes quitar el class="arriba" y sustituir .arriba con #cabeza. Y así también con los demás.

Mikmoro · #3 (**permalink**) 23/03/2008, 06:00

Hola, Raulmmmm.

Creo que ha salido varias veces la misma cuestión en pocos días: basta con ponerle el float: left sólo al de la izquierda, y de esa manera te ahorras hacer el corte abajo para que crezca el contenedor. Este código es algo más económico:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RealState Argentina</title>
<style>
#contenedor {
width:800px;
margin: 0 auto;
}
.arriba{
height: 90px;
border: 1px solid #788DA2;
background-color: #788DA2;
}
.izquierda, .derecha{
height:400px;
border: solid 1px white;
color:#FFFFFF;
}
.izquierda{
float: left;
width:400px;
background-color: red;
}
.derecha{
background-color: blue;
}
</style>
</head>
<body>
<div id="contenedor">
<div class="arriba"></div>
<div class="izquierda"></div>
<div class="derecha"></div>
</div></body>
</html>

Mikel.

Elalux · #4 (**permalink**) 23/03/2008, 11:17

Muchísismas grácias Raulmmmm y Mikmoro ya quedó.

Saludos.

Elalux · #5 (**permalink**) 23/03/2008, 12:22

Abusando de tu generosidad Mikmoro una preguntita.

¿Cómo es que el contenerdor queda centrado si no se especifica eso en ningún lado?

Saludos.

Mikmoro · #6 (**permalink**) 23/03/2008, 12:51

Sí, se especifica en la css:

#contenedor {
width:800px;
margin: 0 auto;
}

La línea margin: 0 auto; significa 0 pixels de margen arriba y abajo, y auto a los lados, lo que hace que se centre.

Mikel.

Elalux · #7 (**permalink**) 23/03/2008, 18:59

Ah ok, muchas grácias nuevamente Mikmoro.

Saludos.