CSS para un pie de pagina

[granbosteron]

Creo que es un tema muy hablado, pero sigo sin encontrarle solucion.

Estoy necesitando una estructura como esta:
http://www.araudi.net/ejemplos/3_capas.html

El problema es cuando "cuerpo" crece mediante informacion y cosas que pongamos dentro del mismo, ya que "pie" tiene una posicion absoluta, cuerpo al crecer y superar el tamaño de pantalla, empieza a crecer por detras de "pie".

Si a "pie" le pongo posicion relativa, el problema mencionado es solucionado "cuerpo" crece y "pie" desciende en la pantalla sobre el margen inferior, pero cuando "cuerpo" tiene poca informacion dentro de su estructura, "pie" no queda en la parte inferior sino que queda por el medio o con unos 30px desde el margen inferior.

Hay alguna solucion a esto?
El ejemplo a probar es el mismo del link, me parece muy buenas las orientaciones, pero esto lo considero un error.

Si esta la respuesta en algun post del foro, agradeceria me lo pasen. Juro que lei bastante y no di con la solucion. Pero si esta, pido perdon y borren este post.

gracias

[PrendekZ]

Es sencillo, muy sencillo:

HTML:

<div id="capaMadre">
<div id="cabecera">Header</div>
<div id="cuerpo">Cuerpo</div>
<div id="pie">Pie</div>
</div>

CSS:

html, body{
margin:0;
padding:0;
height:100%;
background-color:#366;
}
#capaMadre{
width:790px;
margin:0 auto;
height:100%;
}
#cabecera{
background-color: #c93;
text-align: center;
height:80px;
}
#cuerpo{
height:80%;
padding:20px 0;
background-color: #6cc;
}
#pie{
height: 40px;
background-color: #333;
color: #fff;
text-align: center;
clear: both;
}

Hay tienes un ejemplo, quita el Height del #cuerpo y coloca "min-height" y un valor en px, 400px puede ser bien.. y listo!

Si vas a colocar capas flotantes dentro de cuerpo o cualquier div, al div padre "en este caso siendo #cuerpo", agregale:

overflow:hidden;

Saludos!

[jomaruro]

Hola:

Deberías echarle un vistazo a este ejemplo de la misma página.

Saludos.

[lukiluk09]

Buenas:

No entiendo bien para que quieres un pie con Posicion absoluta.

Si tiene posicion absoluta , esta fuera del flujo normal de los elementos (divs) , osea que el pie siempre te va a quedar por arriba del cuerpo (con flujo normal)
Asi funciona,por eso.. no creo q haya solucion.
Busca mas info sobre posicion y flujo en css. hay mucha info y videos al respecto. Saludos

espero q t sirva.

[granbosteron]

Gracias gente por las respuestas y ejemplos.
Pero alguien prueba estos ejemplos con contenido en su interior? todo muy lindo pero a la hora de poner contenido se desarma todo.

Lo que necesito es un pie que se comporte como pie, cuando hay mucho o poco contenido en el cuerpo.

En estos ejemplos, noto que el pie, al reducir la pantalla pisa al contenido del cuerpo. Si hay poco contenido, se mantiene en la parte inferior y esta bien. Pero si cuerpo tiene contenido, al reducir la pantalla, pie pisa la informacion de cuerpo.

hay otras soluciones con CSS? o sigo con las tablas?

[lukiluk09]

Creo que estas confundiendo posicionamiento con como flotan los elementos. Yo hice el ejemplo.

tendrias q encerrar todo en un div contenedor (el header el cuerpo y el pie)
y que los tres div floten a la izquierda con float:left

Yo hice la prueba. y funciona!.

Saludos!.Y espero q te haya servido.

[jomaruro]

Hola:

¿Y que problema hay con el ejemplo que te he puesto aquí? ¿Porqué no te vale?

Saludos.

[granbosteron]

Iniciado por jomaruro

Hola:

¿Y que problema hay con el ejemplo que te he puesto aquí? ¿Porqué no te vale?

Saludos.

Si Jomaruro y gracias!!! Pero no me funciona para como queria que se comporten los div a a la hora de reducir o extender la ventana del browser.

Les dejo el ejemplo que encontre por ahi y funciona realmente muy bien y es lo que queria. Quizas ya postearon algo parecido, pero realmente no lo encontre y este ejemplo econtrado espero les sirva a la gente que busca sobre este problema!

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Es muy parecido a los ejemplos de mas arriba, creo que la diferencia que veo es que en el div "content" esta seteado el padding inferior con el tamaño que debe llevar el pie, puede ser esto como lo estoy explicando? espero que si, porque en mi tonta cabeza sobre el css es lo que entendi

abrazo a todos y gracias nuevamente! Siempre encontramos la solucion o estamos a un 99.9%