Foros del Web » Creando para Internet » CSS »

Ubicar un DIV debajo de otro, sin altura definida

Estas en el tema de Ubicar un DIV debajo de otro, sin altura definida en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/08/2008, 09:59
 
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 262
Antigüedad: 10 años, 6 meses
Puntos: 1
Ubicar un DIV debajo de otro, sin altura definida

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
__________________
Moebius Digital | La pieza que faltaba
Diseño web | Web hosting
  #2 (permalink)  
Antiguo 21/08/2008, 04:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 218
Antigüedad: 9 años, 4 meses
Puntos: 6
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

¿no te vale situar el DIV#pie seguido del DIV#main?
  #3 (permalink)  
Antiguo 22/08/2008, 08:18
 
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 262
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

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
__________________
Moebius Digital | La pieza que faltaba
Diseño web | Web hosting
  #4 (permalink)  
Antiguo 22/08/2008, 08:29
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

Pon tu código, no creo que sea necesario tener esos divs con posición absoluta. Ponlo para ver el panorama completo
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #5 (permalink)  
Antiguo 25/08/2008, 16:17
 
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 262
Antigüedad: 10 años, 6 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
  #6 (permalink)  
Antiguo 25/08/2008, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

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.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 25/08/2008, 18:56
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

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.
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #8 (permalink)  
Antiguo 26/08/2008, 22:05
 
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 262
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Ubicar un DIV debajo de otro, sin altura definida

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