Ubicar un DIV debajo de otro, sin altura definida

[MoebiusDigital]

Estimados, tengo el siguiente problema: tengo un DIV #main en donde figura todo el contenido de una web. Dentro de éste hay otros DIVs ubicados con position:absolute.

Quisiera ahora agregar un DIV #pie por debajo de #main. ¿A alguien se le ocurre cómo hacerlo? Actualmente me lo agrega sobreimpreso encima de #main.

Aclaración: no vale poner #pie con position:absolute debido a que el contenido que se carga en #main es dinámico y su alto cambiará todo el tiempo.

Muchas gracias,
Pablo

[ilie]

¿no te vale situar el DIV#pie seguido del DIV#main?

[MoebiusDigital]

Me temo que no, porque el DIV#main tiene adentro otros DIVs pasados como position:absolute. Eso hace que el DIV#main no tenga altura, entonces me ubica el DIV#pie sobreimpreso al DIV#main, en la parte superior de la página, y no debajo de su contenido.

Gracias,
Pablo

[lucasan]

Pon tu código, no creo que sea necesario tener esos divs con posición absoluta. Ponlo para ver el panorama completo

[MoebiusDigital]

Página index.html:

Código HTML:

<div id="main">
  <div id=[...]
  <!-- AQUÍ VAN MUCHOS DIVS CON POSICIONES ABSOLUTAS,
CON CONTENIDO DINÁMICO -->
</div>

<div class="mod-contacto">
  <!-- ESTE DIV DEBIERA ESTAR SIEMPRE DEBAJO DEL ANTERIOR DIV#MAIN,
TENGA #MAIN EL ALTO QUE TENGA -->
</div> 

Hoja de estilos:

Código:

/********************** PRINCIPAL ******************************/

#main {
	width: 780px;
	margin: auto;
	text-align: left;
	position: relative;
}


/********************** IZQUIERDA ******************************/
/* ESTOS SON LOS DIVS QUE VAN DENTRO DE MAIN */

.mod-izquierda-1 {
	top: 160px;
	left: 10px;
	position: absolute;
}

.mod-izquierda-2 {
	top: 381px;
	left: 10px;
	position: absolute;
}

.mod-izquierda {
	background-image: url(../img/cuadro-portada.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	width: 210px;
	height: 208px;
	padding: 7px 35px;
}

.mod-izquierda h1 {
	margin: 0;
	padding: 0 0 16px 0;
	font-size: 12px;
	color: #FFF;
}
.mod-izquierda h1 a {
	margin: 0;
	padding: 0 0 8px 0;
	font-size: 12px;
	color: #FFF;
}


/********************** CENTRO ******************************/
/* ESTOS SON LOS DIVS QUE VAN DENTRO DE MAIN */

.mod-noticias-portada {
	position: absolute;
	width: 310px;
	height: 409px;
	background-image: url(../img/noticias-portada.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	top: 170px;
	left: 232px;
	padding: 5px 20px;
	z-index: 1;
}

.mod-noticias-portada-contenido {
	overflow: hidden;
	width: 280px;
	height: 389px;
	margin: 10px;
}

.mod-noticias-portada-scroll {
	position: absolute;
	height: 389px;
	width: 15px;
	left: 320px;
	top: 10px;
}


/********************** INFERIOR ******************************/
/* ESTE DIV QUIERO UBICARLO DEBAJO DE LO ANTERIOR... 
POR AHORA LO PASÉ CON POSITION:ABSOLUTE, PERO NO ME SERVIRÁ
PARA EL DESARROLLO QUE QUIERO HACER, YA QUE NECESITO QUE SU
POSICIÓN CAMBIE DE ACUERDO AL CONTENIDO DE MAIN */

.mod-contacto {
	position: absolute;
	width: 371px;
	height: 172px;
	background-image: url(../img/contacto-cuadro.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	top: 568px;
	left: 410px;
	padding: 5px 20px;
	z-index: 0;
}

.mod-contacto h2 {
	color: #FFF;
	margin: 2px 0 0 203px;
	padding: 0;
	font-size: 11px;
}

Espero vuestras sabias respuestas.
Muchas gracias,

Pablo

[Mikmoro]

Yo opino como lucasan, que no necesitas para conseguir lo que quieres las posiciones absolutas, de hecho eso impedirá que lo consigas.

Si pones un enlace o todo el html-css podremos ayudarte a cuadrar todo sin esas posiciones e intentar solucionar el problema.

[lucasan]

Te explico, cuando usas posiciones absolutas, "ignoras" el resto de tu layout.

Es decir, que posiblemente (no lo aseguro sin ver un enlace) mod-contacto si esta debajo de main, sino que main no está creciendo conforme crece el contenido de los otros divs, ya que ellos al estar posicionados de manera absoluta no hacen "crecer" a main.

Me hago entender?

Una recomendación: Si usas Firefox instalate el firebug, (un complemento) que te puede ayudar a entender claramente el posicionamiento en CSS, y te evitará muchos dolores de cabeza cuando maquetes sitios.

Saludos.

[MoebiusDigital]

Finalmente tenían razón. La mejor solución fue ubicar el contenido dinámico en DIVs con position:relative y así acomodar todo. Pensé que podría haber alguna opción más sencilla usando position:absolute, pero no fue así.

Muchas gracias a todos.

Buenísima la recomendación, lucasan, del firebug.

Saludos a todos,
Pablo