alineando 3 divs relativamente.

Portgaz · #1 (**permalink**) 04/12/2010, 13:02

Hola amigos.
Mire, quiero lograr algo como la siguiente imagen:
http://i52.tinypic.com/10frz0l.jpg

y he utilizado el siguiente codigo, pero el 3 div, no logro alinearlo relativamente con los otros dos.
queda abajo, como si tuviera un <br />, pero no lo tengo.

Aqi les dejo el code:

Código HTML:

<html>
<head>
<title>Portgaz</title>
<style type="text/css">

body {
background:#D8D8D8;
}

#bodo {
background:#8181F7;
margin:auto;
width:90%;
height:500px;
}

#div1 {
background:#0B0B61;
width:25%;
height:500px;
float:left;
z-index:1;
}

#div2 {
background:#0B0B61;
margin-left:auto;
margin-right:auto;
width:35%;
height:500px;
z-index:2;
}

#div3 {
background:#0B0B61;
width:25%;
height:500px;
float:right;
z-index:3;
}

</style>
</head>
<body>

<div id="bodo">

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</div>

</body>
</html>

Espero su ayuda, Gracias.

Anotadorcom · #2 (**permalink**) 04/12/2010, 14:02

Cita:

<head>
<title>Portgaz</title>
<style type="text/css">

body {
background:#D8D8D8;
}

#bodo {
background:#8181F7;
margin:auto;
width:90%;
height:500px;
}

#div1 {
background:#0B0B61;
width:25%;
height:500px;
float:left;
z-index:1;
}

#div2 {
background:#0B0B61;
margin-left:5%;
float:left;
width:35%;
height:500px;
}

#div3 {
background:#0B0B61;
margin-left:5%;
width:30%;
height:500px;
float:right;

}

</style>
</head>
<body>

<div id="bodo">

<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
</div>

</body>

Portgaz · #3 (**permalink**) 04/12/2010, 14:58

Como mola!! Anotadorcom.
Muchisimas Gracias.

Nomas que cuando minimizo la ventana mas pequeña o hay otro monitor mas pequeño, los divs se enconjen.

Y lo solucione dandole un ancho fijo (en px) al sub body (#bodo).
Y en los divs hijos, utilize proporciones en % para que se ajustara bien y no se salieran de el div padre (#bodo) y ahora ya todo me jala bien.

La unida dudita es, por que solo pusiste z-index:1 en el primero, y en los demas no.
y sin unas position relative, se han ajustado relativamente.

Es lo unico que no logro entender.

Gracias