Centrar un div con respecto a otro

eagleoneraptor · #1 (**permalink**) 11/06/2010, 15:29

Hola, ¿cómo andan? tengo un problemita de diseño, a ver si alguien me puede ayudar, supongamos este código:

Código HTML:

Ver original<!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=utf-8" />
    <title>Centrar Divs</title>
    <style type="text/css">
        .ref{
            float:left;
            background-color:#BCFCFF;
            width:30%;
        }
        .centrado{
            background-color:#FFFB9B;
            float:left;
            width:30%;
            margin-top:auto;
        }
    </style>
</head>
<body>
    <div class="contenido">
        <div class="ref">
            <h1>Título del contenido</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae sapien sit amet erat rhoncus consequat nec at ipsum. Vivamus molestie, metus nec aliquet scelerisque, metus leo pretium purus, eu varius felis orci non arcu. Aliquam ligula justo, tempus ac posuere at, facilisis semper quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor tortor eu leo mattis rutrum. Nulla euismod fermentum feugiat. Duis vehicula, velit nec mattis scelerisque, felis quam dapibus libero, tempor laoreet leo nibh vitae ipsum. Proin elementum interdum purus, quis ornare felis placerat ut. Vivamus egestas ornare ipsum. Vivamus sit amet tellus velit, at hendrerit nulla. In semper magna a tellus dapibus ut posuere dui mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
        </div>
        <div class="centrado">
            Esto debe ir centrado con el DIV celeste
        </div>
    </div>
</body>
</html>

Como ven muestra un Div celeste con uno amarillo a su derecha...
Lo que quiero hacer es que el div amarillo se alinee verticalmente con respecto al celeste independientemente del contenido del amarillo, también necesito que estén los 2 flotando a la izquierda como lo están ahora.

¿Habrá alguna forma sin recurrir a tablas y/o JS?
Puede que en el DIV izquierdo haya una imagen, ¿ayudaría verticla-align en ese caso?

Un Saludo!

AhmedRugama · #2 (**permalink**) 11/06/2010, 17:58

Te aconsejo que siempre busques en el foro, este es un problema bastante comun, te paso una respuesta que di anteriormente:

Cita:

lo que puedes hacer es ponerle el fondo de los dos divs al contenedor, el cual si se estiraria.

Por ejemplo si la columna uno ("azul") es mas larga que la columna dos ("roja") y quiero que se miren iguales lo que haria seria crear un fondo mitad azul mitad rojo y aplicarselo al contenedor con un y-repeat.

Aqui lo unico que te faltaria seria agregar un <div style="clear:both"></div> despues de la segunda columna, adentro del contenedor

Espero te sirva

eagleoneraptor · #3 (**permalink**) 11/06/2010, 18:09

Hola, gracias por responder.

El problema es que el color de fondo de los Divs no tiene nada que ver, ya que en realidad ni fondo llevan, era solo para diferenciar los divs en la página de prueba.

Yo lo que estoy haciendo ahora, es al div amarillo que se encuentra muy arriba, darle bastante margen superior, la cuestión es que si cambia el número de líneas del contenido de uno u otro div, no quedaría bien centrado por lo que un margen único no me sirve, ya que tengo una lista de pares de divs, y todos deberían quedar centrados.

Un Saludo!

AhmedRugama · #4 (**permalink**) 11/06/2010, 19:23

Si lo que quieres es simplemente centrarlo verticalmente, deverias centrar cada uno con relacion al contenedor lo que tienes que hacer es algo asi:

Código:

<div style="position:relative;"><!--contenedor-->

   <div style="position:absolute; left=0; top:50%; width=30%;"><!--columna1-->
        <div style="position:relative; top=-50%;">
        </div>
   </div>

   <div style="position:absolute; left=30%; top:50%; width=30%;"><!--columna2-->
        <div style="position:relative; top=-50%;">
        </div>
   </div>

</div>

creo que tienes que modificar esto para que te funcione en todos los borwsers
es solo un ejemplo
igual te puedes verificar en el foro

link