alinear verticalmente contenido

Jamati · #1 (**permalink**) 25/02/2008, 08:30

Pues tengo el siguiente problema:

Tengo un <div> y quiero alinear el contenido dentro del mismo hacia abajo (verticalmente hablando). He leído mucho sobre alinear y todo el soporte que hay en la web está dirigido principalmente al alineamiento horizontal... pero justamente ahora quiero alinear todo hacia abajo.

Con tablas no había problema, ya que ponía vertical-align:bottom... pero en una capa como se hace ?

Gracias por cualquier sugerencia.

Saludos !!

_GaBY_ · #2 (**permalink**) 25/02/2008, 11:27

Puede ser que sea, que tengas que darle un nombre al div?
Asi cuando vayas al codigo, puedas darle solo esa

Código HTML:

 <div id="nombre">  asi cuando vayas al css solo le pones las propiedades #nombre: etc...;

Bue, eso es lo primero que se me vino a la cabeza.
No se si te servira, je
Saludos

Jamati · #3 (**permalink**) 25/02/2008, 12:56

muchas gracias por responder _GaBY_

te cuento que la capa ya tiene nombre, eso está Ok, pero dentro del CSS como sería el código ??... me explico ?

porque para las tablas ponía: vertical-align:buttom , pero para los <div> no sé y me estoy volviendo loco

cualquier ayuda me serviría, muchísimas gracias nuevamente.

_GaBY_ · #4 (**permalink**) 25/02/2008, 14:07

Creo que tenes que usar los "margin"

#nombre {
margin-top:10px; margin-bottom:10px;
}

Mira encontre esta pagina dentro del foro:
http://www.forosdelweb.com/967310-post50.html
es medio viejo pero que se yo...
Espero que te sirva!!

Jamati · #5 (**permalink**) 25/02/2008, 16:18

Muchísimas gracias....

tengo un <div> con un determinado alto, y dentro de esta capa hay varios div mas, pero quiero que todo se alinee verticalmente hacia abajo, o sea quiero que tenga una alineación vertical inferior.

Este código que me pasaste es para texto, pero también funciona si tengo divs ??

rasmarko · #6 (**permalink**) 27/02/2008, 01:49

Logré algo a lo que tu te refieres, mi propuesta es hacer un display: table-cell al Div principal, que dentro de él tengas más código html como imágenes, texto e incluso otros divs.

Aquí te dejo un ejemplo completo de cómo podría funcionar:

Código PHP:

   <style>
.principal {
display: table-cell;
vertical-align: bottom;
height: 500px;
background: #FFCC66;
}
.contenido {
padding: 50px;
background: #333333;
color: #FFFFFF;
}

</style>


<div class="principal">
<div class="contenido">
  <p>Pues tengo el siguiente problema:</p>
  <p>Tengo un y quiero alinear el contenido dentro del mismo hacia abajo (verticalmente hablando). He leído mucho sobre alinear y todo el soporte que hay en la web está dirigido principalmente al alineamiento horizontal... pero justamente ahora quiero alinear todo hacia abajo.</p>
  <p> Con tablas no había problema, ya que ponía vertical-align:bottom... pero en una capa como se hace ?</p>
  <p>Gracias por cualquier sugerencia.</p>
  <p>Saludos !! </p>
</div>
</div>

Sin embargo, al terminar de proponer lo anterior, me encontré con la sorpresa de que sólo funciona en Firefox y Opera, pero Internet Explorer no lo reconoce.

Espero que alguien pueda, con base en mi ejemplo, dar a luz una solución, como un hack, para el ahora tan odiado navegador de Internet Explorer.

Jamati · #7 (**permalink**) 27/02/2008, 15:48

Bastante interesante rasmarko...

la verdad que no entendía (y quizás todavía tampoco entiendo) como funciona el display:table-cell ... pero si con eso funciona buenísimo.

Ahora como bien vos dijiste, esperemos que alguien con mas conocimientos nos ayude a ver como podemos lograr esto para el maldito explorer !!!

muchas gracias por la respuesta, cuando tengamos la parte que nos falta para explorer ahí sí podré implementarlo.

Gracias y espero que alguien nos pueda ayudar.

_GaBY_ · #8 (**permalink**) 27/02/2008, 17:11

jajaj que lio que es esto!!

me dijieron que si el problema es solo en IE TEngo que usar



Dentro de pagina.html en la parte de <body>
y se corrige solo en el IE...