Tema: Centrar un div con respecto a otro
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/06/2010, 15:29
eagleoneraptor
 
Fecha de Ingreso: marzo-2009
Mensajes: 47
Antigüedad: 15 años, 1 mes
Puntos: 0
Centrar un div con respecto a otro
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>Centrar Divs</title>
  6.     <style type="text/css">
  7.         .ref{
  8.             float:left;
  9.             background-color:#BCFCFF;
  10.             width:30%;
  11.         }
  12.         .centrado{
  13.             background-color:#FFFB9B;
  14.             float:left;
  15.             width:30%;
  16.             margin-top:auto;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="contenido">
  22.         <div class="ref">
  23.             <h1>Título del contenido</h1>
  24.             <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>
  25.         </div>
  26.         <div class="centrado">
  27.             Esto debe ir centrado con el DIV celeste
  28.         </div>
  29.     </div>
  30. </body>
  31. </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!