Cambiar de posición DIvs

euforico · #1 (**permalink**) 22/12/2008, 16:58

Estimados:

He intentado cambiar de posición unos divs. Me explicó tengo en código lo siguiente:

Código:

<div class="div_01"></div>
<div class="div_02"></div>

Lo que quiero lograr es que por CSS el "div_02" quede encima del "div_01". Si alguien no entendio mucho mi idea, pueden verlo en imagen directamente http://es.tinypic.com/view.php?pic=2d9a1s0&s=5

Muchas gracias

emiliodeg · #2 (**permalink**) 22/12/2008, 17:21

div {float:right}

Mikmoro · #3 (**permalink**) 22/12/2008, 17:48

HTML:

Cita:

CSS:

Cita:

.div_01, .div_02 {position: relative;
height: 24px;
}
.div_01 {top: 24px;}
.div_02 {top: -24px;}

Por ejemplo.

euforico · #4 (**permalink**) 22/12/2008, 17:48

Pero no me funciona así, si utilizo de esa forma el "div_02" me queda al costado izquierdo del día "div_01"

Ejemplo

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
| div_02 | div_01 |
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

euforico · #5 (**permalink**) 22/12/2008, 17:50

Mikmoro muchas gracias por tu ayuda, pero el problema es que el "div_01" puede tener altura relativa de acuerdo a la cantidad de contenido que posea, entonces la forma que me mencionas no me serviría en ese caso.

Mikmoro · #6 (**permalink**) 22/12/2008, 17:55

Cita:

Iniciado por euforico

Mikmoro muchas gracias por tu ayuda, pero el problema es que el "div_01" puede tener altura relativa de acuerdo a la cantidad de contenido que posea, entonces la forma que me mencionas no me serviría en ese caso.

Ya, creo que deberías haberlo mencionado antes. De todas maneras, me parece que si la altura de ambas cajas es dinámica, mediante CSS va a ser bastante difícil que puedas permutar las posiciones. De momento no se me ocurre cómo. A ver a los demás.

euforico · #7 (**permalink**) 22/12/2008, 18:09

Cita:

Iniciado por Mikmoro

Ya, creo que deberías haberlo mencionado antes. De todas maneras, me parece que si la altura de ambas cajas es dinámica, mediante CSS va a ser bastante difícil que puedas permutar las posiciones. De momento no se me ocurre cómo. A ver a los demás.

Perdon, solamente el "div_02" tiene altura dinámica, el "div_01" tiene altura fija. Lamento no haberlo mencionado antes.

Mikmoro · #8 (**permalink**) 22/12/2008, 18:26

En ese caso se me ocurre una manera (un simple ejemplo):

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#contenedor {position: relative;
padding-bottom: 22px;
}
.div_01, .div_02 {color: #fff;}
.div_01 {background-color: #00f;
position: absolute;
height: 22px;
width: 100%;
bottom: 0;
}
.div_02 {background-color: #f0f;}
</style>
</head>
<body>
<div id="contenedor">
<div class="div_01">Bloque 1</div>
<div class="div_02">Bloque 2</div>
</div>
</body>
</html>

euforico · #9 (**permalink**) 22/12/2008, 19:30

Mikmoro, muchisimas gracias. Finalmente con lo que me mencionaste pude hacer el objetivo que quería con los divs.