Positioning

[spaniol]

Hola, contertulios. Estaba experimentando para hacer un footer centrado en el pie de página.

Una vez me pareció haberlo logrado, hice un div para el contenido. Lo puse antes que el footer, pero se me posiciona abajo. Abajo y detrás, porque el footer es absoluto.

Todo el código HTML y CSS está aquí:
http://www.cafeestudio.cl/prueba.html

Es una página muy simple y sólo tiene los protagonistas de todo el embrollo.

Ya fue probado situar el div del contenido de forma absoluta y con top:0px; pero eso sólo hace que el contenido se vaya a la izquierda.

Qué podré estar pasando por alto acá?

[gVenom]

entre varias cosas, si le das posición absoluta al div, tienes que indicarle en que posicion va a ir y no lo has hecho

.footer {
background-color: #0F9;
height: 50px;
position: absolute;
width: 100%;
bottom: 0px;
}

La posición absoluta la toma de la totalidad del espacio en pantalla y no del div en el que está. Intenta mejor con una posicion relativa

.footer {
background-color: #0F9;
height: 50px;
position: relative;
margin: 0 auto;
width: 100%;
}

[sanxuan]

Puedes probar estas propiedades:

Código CSS:

.footer {
    background-color: #00FF99;
    bottom: 0;
    height: 50px;
    margin-top: -50px; /* El alto del footer */
    position: absolute;
    width: 100%; /* aquí no sé porqué no aparece correctamente el 100% */
}
.contenedor {
    min-height: 100%;
    padding-bottom: 50px; /* El alto del footer */
    position: relative;
}
 

Comprueba el código porque aparece el footer en otra parte del HTML dentro de contenedor y podría aparecer duplicado.

[spaniol]

Grosos! Voy a probar todo lo que me han dicho. Por eso los quiero! Gracias.

[jomaruro]

Hola:

Iniciado por gVenom

La posición absoluta la toma de la totalidad del espacio en pantalla y no del div en el que está.

La posición absoluta toma su posición con respecto a las coordenadas 0,0 que es la esquina superior izquierda, pero no hay que olvidar que puede tomar su posición con respecto a su padre si este tiene posición relativa.

Saludos.