Columnas 100% de alto con elemento con alineación vertical bottom

jseros · #1 (**permalink**) 17/12/2008, 14:14

Saludos Amigos,

Tengo un diseño con 2 columnas, una de navegación y otra de contenido. La de contenido crece variablemente y la de navagación aparte del menu tiene un swf embedido pero que siempre debe quedar al final de la columna.

Lo que necesito hacer es dejar la columna de navegación al 100% de alto para que crezca verticalmente a medida que crece tambien la de contenido y que el swf siempre quede al final de las columnas de navegación. He encontrado como dejar la columna de navegación al 100% pero no cómo alinear verticalmente el swf.

Muchas Gracias por su ayuda y espero haberme hecho entender.

kseso? · #2 (**permalink**) 17/12/2008, 16:24

Si a la columna de navegación tiene como propiedad

Cita:

position: relative;

encierra el swf en un div y entre otros atributos ponle a ese contenedor:

Cita:

position: abosolute;
bottom: 0;

jseros · #3 (**permalink**) 18/12/2008, 08:05

Muchas gracias kseso?. Funcionó perfecto.

CraToS · #4 (**permalink**) 03/08/2009, 19:49

Qué bien, lo busque por todos lados esto, ya que siempre dan la solución de alinear al fondo del sitio, pero no al fondo de otro div.

En resumen yo buscaba algo así:

Código HTML:

<html>
<head>
<style type="text/css">
#container { 
      width: 300px;   /* Ancho fijo */
      height:400px;   /* Alto fijo fijo  */
      margin:auto;
      border: 2px #333 solid;
      position:relative;
}

#vertical-top { 
      border: 1px #03F dashed;
}

#vertical-bottom {
      border: 1px #063 dashed;
      bottom: 0px;
      position:absolute;
}
</style>
</head>

<body>
    <div id="container">
    	<div id="vertical-top">Quiero este arriba</div>
        <div id="vertical-bottom">Quiero este abajo</div>
    </div>
</body> 
</html>

Muchas gracias!