Duda con divs

[Tram]

Hola,


Mi web tiene esta estructura:


<div id="contenido">
<div id="centro">

</div>
<div id="pie">
</div>
</div>

y en la css tengo:

#pie
{
clear: both;
background-color: #ffffff;
width: 100%;
font-size: .8em;
font-family: arial, verdana, tahoma, sans-serif;
margin: auto;

}
#centro
{
float: left;
margin: 0 0 1em 1.56em;
padding: 0;
width: 54%;
text-align: justify;
height:auto;
}

Según está, el pie se va moviendo según el tamaño del div centro. Lo que quiero es que el pie esté fijo en la parte baja de la pantalla, y que cuando el centro ocupe mucho espacio, el pie se desplace hacia abajo hasta donde ocupe el centro y se vea cuando se use el scroll normal que sale en cualquier pagina.
No sé si me explico...
He hecho un dibujo rápido para explicarlo mejor.



Alguna idea?

[sanxuan]

#contenido {
min-height: 100%;
position: absolute;
top: 0;
}
#centro {
margin-bottom: 30px; /* alto del pie */
}
#pie{
position:absolute;
bottom: 0;
height: 30px;
}

Añade las propiedades que necesites.
El div centro está pensado para que tenga el alto de su contenido, pero podrías hacerlo que ocupe toda la pantalla si te hiciera falta.

[pqek]

Ps si mal no entiendo lo que debes hacer es quitarle el float:left a la capa centro, puesto que hasta donde veo no necesitas flotar nada, con eso debería solucionarse

Saludos

[pqek]

Ps si mal no entiendo lo que debes hacer es quitarle el float:left a la capa centro, puesto que hasta donde veo no necesitas flotar nada, con eso debería solucionarse

Saludos