Ver Mensaje Individual
  #5 (permalink)  
Antiguo 25/08/2008, 15:17
MoebiusDigital
 
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 262
Antigüedad: 16 años, 10 meses
Puntos: 1
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

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
__________________
Moebius Digital | La pieza que faltaba
Diseño web | Web hosting