Foros del Web » Creando para Internet » HTML »

Alineacion vertical de DIVS

Estas en el tema de Alineacion vertical de DIVS en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/11/2007, 09:30
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Alineacion vertical de DIVS

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
  #2 (permalink)  
Antiguo 09/11/2007, 10:43
Avatar de Kailu  
Fecha de Ingreso: julio-2007
Ubicación: México D. F.
Mensajes: 89
Antigüedad: 10 años, 5 meses
Puntos: 1
Re: Alineacion vertical de DIVS

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.
  #3 (permalink)  
Antiguo 09/11/2007, 11:38
 
Fecha de Ingreso: marzo-2007
Mensajes: 538
Antigüedad: 10 años, 9 meses
Puntos: 0
Re: Alineacion vertical de DIVS

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">&nbsp;</div>
<div class="content">&nbsp;</div>
<div class="footer">&nbsp;</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.
  #4 (permalink)  
Antiguo 15/11/2007, 03:33
Avatar de Kailu  
Fecha de Ingreso: julio-2007
Ubicación: México D. F.
Mensajes: 89
Antigüedad: 10 años, 5 meses
Puntos: 1
Re: Alineacion vertical de DIVS

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;
}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:55.