Foros del Web » Creando para Internet » CSS »

Mantener el div "pie" siempre debajo del "menú" y del "cuerpo"

Estas en el tema de Mantener el div "pie" siempre debajo del "menú" y del "cuerpo" en el foro de CSS en Foros del Web. Hola: Aunque he utilizado bastante el CSS, nunca lo había hecho demasiado en serio. Así que ahora quiero hacer un diseño típico con cabecera, menú, ...
  #1 (permalink)  
Antiguo 11/06/2005, 02:32
Avatar de jpinedo
Colaborador
 
Fecha de Ingreso: septiembre-2003
Ubicación: Lima, Perú
Mensajes: 3.120
Antigüedad: 14 años, 2 meses
Puntos: 41
Mantener el div "pie" siempre debajo del "menú" y del "cuerpo"

Hola:
Aunque he utilizado bastante el CSS, nunca lo había hecho demasiado en serio. Así que ahora quiero hacer un diseño típico con cabecera, menú, cuerpo y pie.

El HTML tiene esta estructura
Código HTML:
<div id="cabecera">Lo que va en la cabecera</div>
<div id="navegacion">Una lista de enlaces aquí</div>
<div id="cuerpo">Aquí el cuerpo</div>
<div id="pie">Lo que va en el pie</div> 
Lo que quiero es que el menú ("navegación") quede a la izquierda del "cuerpo" y el "pie" debajo de ambos.

Intenté esto:
Código:
#navegacion {
	float: left;
}
También esto
Código:
#navegacion {
	position: absolute;
	left: 0px;
	width: 190px;
}
#cuerpo {
	margin: 0px 0px 0px 190px;
}
Ambas cosas funcionan siempre que el menú sea más pequeño que el cuerpo. Pues el "pie" siempre se sitúa inmediatamente debajo de "cuerpo".

Lo que necesito es que "pie" se sitúe siempre debajo del elemento más largo (navegacion o cuerpo). Y también quisiera saber si se puede hacer que el div más corto entre ambos siempre se prolongue hasta el tamaño del más largo. (supongo que esto solucionaría lo anterior)

Espero que se haya entendido.

Saludos
  #2 (permalink)  
Antiguo 11/06/2005, 14:57
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
este es un esquema básico que me funciona de maravilla:

#encabezado {
position:relative;
width:100%;
height:115px;
z-index:1;
}
#navegacion {
position:relative;
width:20%;
z-index:2;
float:left;
}
#contenido {
position:relative;
width:80%;
z-index:3;
float:right;
}
#pie_de_pagina {
position:relative;
width:100%;
height:25px;
z-index:4;
}
__________________
Al final del día hablar es gratis, codificar no lo es
  #3 (permalink)  
Antiguo 11/06/2005, 17:04
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
al pie de pagina ponele "clear: both"... le dice que no flote alrededor de otro div flotante, sino que se situe debajo.
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 11/06/2005, 20:06
Avatar de jpinedo
Colaborador
 
Fecha de Ingreso: septiembre-2003
Ubicación: Lima, Perú
Mensajes: 3.120
Antigüedad: 14 años, 2 meses
Puntos: 41
Muchas gracias.
Voy a probar las soluciones que me han dado.
Saludos
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 18:03.