Alineacion vertical de DIVS

Laufwerk · #1 (**permalink**) 09/11/2007, 09:30

Hola amigos!!! A ver si me sabeis resolver este tema:
tengo un div main y dentro de este, tengo 3 más, el header, el content y el footer.
-Las propiedades del main son:
position:absolute;
float:left;
width:100%;
height:100%;
y las propiedades de los demas son
position:relative;
float:left;
osease que tengo algo como esto
<div id="main">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
si les pongo anchura, (width) a todos los divs a 100%, automaticamente se me adaptan al ancho de la pantalla del explorador;pero si se lo pongo en la altura no me hace ni caso.

Y ya por últimas lo ideal fuera que el footer estubiera alineado al final de la pagina osea bottom.

No lo consigo, exarme un cable

Kailu · #2 (**permalink**) 09/11/2007, 10:43

Hola Laufwerk.

Me gustaría ver un ejemplo más gráfico de lo que quieres para poder ayudarte mejor, pero creo entender tu problema.

Un div se va ajustar autmáticamente a lo largo (verticalmente) segun su contenido, a menos que lo especifiques en el código pero de forma absoluta:

<div id=midiv style="hight:250px;">

También puedes agregarle overflow para las barras de desplazamiento.

Laufwerk · #3 (**permalink**) 09/11/2007, 11:38

Gracias por tu atencion y posible ayuda.
tengo este codigo en el HTML:

<!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>Untitled Document</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>
<div class="main">
<div class="header"> </div>
<div class="content"> </div>
<div class="footer"> </div>
</div>
<body>
</body>
</html>

y en el CSS tengo:

.main{
position:absolute;
background-color:red;
width:100%;
}
.header{
clear:both;
background-color:blue;
position:relative;
float:left;
height:100px;
}
.content{
clear:both;
background-color:yellow;
position:relative;
float:left;
}
.footer{
clear:both;
background-color:lightgreen;
position:relative;
float:left;
height:50px;
}

Verás que el main se adapta verticalmente a lo que ocupe en su interior, o sea header, content y footer.

Si le pones al main un height:600px; podrás observar que los divs interiores ocupan lo mismo, pero a mi me gustaria que el div footer se pegara a la parte inferior del main, porque en mi pagina y en la mayoria el header y footer tienen un tamaño fijo, el content puede ir variando.

A ver si con esto te sirve.

Mil gracias por adelantado.

Kailu · #4 (**permalink**) 15/11/2007, 03:33

prueba así.

Asegurate que haya suficiente contenido en .content para que puedas ver como .footer se mantiene abajo (en realidad .content la empuja).

Cita:

/* CSS Document */
.main{
position:absolute;
background-color:red;
width:80%;
padding:5px 5px 5px 5px;
}

.header{
clear:both;
background-color:blue;
width:100%;
float:left;
margin: 2px 2px 2px 2px;
}

.content{
clear:both;
background-color:yellow;
float:left;
margin-top:0px;
border: solid 2px #FFFFCC;
margin: 2px 2px 2px 2px;
width:100%;
}

.footer{
background-color:#009900;
color:#FFFFFF;
text-align:center;
padding: 2px 2px 2px 2px;
margin-left:15px;
width:100%;
float:right;
}