Problema con div "contenedor"

[Mahishasura]

Saludos a todos y gracias de antemano por estar leyendo el post.
Mi problema consiste en que tengo una web con varios divs pero son dos con los que tengo problemas, el contenedor y el footer.

El div contenedor carga una página PHP (por medio de include) y el footer un mensaje "X". Cuando la página que carga tiene muy poco contenido, el div contenedor se escala de modo que sobra mucho espacio entre el footer y dicha capa. Lo que quiero es que sin importar cuanto contenido tenga esta div, siempre esté pegada con la parte superior del footer, pero el problema es que el footer queda pegado al bottom del navegador, pero cuando bajo el scrollbar queda arriba.
Lo que tengo es lo siguiente:

Código CSS:

#contenido {
    position:relative;
    left:50%;
    width:1000px;
    margin-left:-500px;
    top: 125px;
    max-width:980px;
    background-image:url(../images/content_bg.png);
    background-color:#E4E4E4;
    background-position:center;
    background-repeat:no-repeat;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:20px;
}
 
#footer {
    position:absolute;
    bottom:0px;
    text-align:center;
    width:90%;
    margin-left:-45%;
    left:50%;
    height:20px;
    color:#999999;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
 

La estructura de la página es esta (mas o menos):

Código HTML:

<div id="contenido">
  <p>
<?
if($_GET['go'] == "home") { include("./sections/home.php"); } 
else { include ("./sections/home.php"); }  
?>
  </p>
</div>
<div id="footer" align="center"><? echo $_foot ?></div>
 

Agradecería sugerencias, críticas, soluciones, etc :D

[cristian_cena]

cito="el problema es que el footer queda pegado al bottom del navegador"

#footer {
position:absolute;
bottom:0px; /*tu footer irá subiendo a medida que aumentes este valor*/}

cito="el div contenedor se escala de modo que sobra mucho espacio entre el footer y dicha capa"

Yo no utilizaría position:absolute; para el footer, ya que con ello se quita al div del flujo normal del documento. Más bien, utilizaría un div contenedor para tus dos divs, "contenido" y "footer" respectivamete. Algo así:

<div id="contenedor">
<div id="contenido"> ... </div>
<div id="footer"> ... </div>
</div>

El problema está en:

#footer {
position:absolute;
bottom:0px;
text-align:center;
width:90%;
margin-left:-45%;
left:50%;
height:20px;
color:#999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

quítalo ...

#footer {
text-align:center;
width:90%;
margin-left:-45%;
left:50%;
height:20px;
color:#999999;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

... y maqueta con un contenedor (<div id="contenedor"> aquí el contenido, en tu caso los dos divs </div>)

cito="pero el problema es que el footer queda pegado al bottom del navegador, pero cuando bajo el scrollbar queda arriba."

Puedes mirar el código de este ejemplo de mikmoro.

Pruebalo y luego nos cuentas! Saludos!

[Mahishasura]

Muchas gracias cristian_cena, pero debo informar que no ha funcionado como quiero, pero de todas formas aproveché de maquetar la página con el div "contenedor" y la verdad es que ha quedado muy bien ordenado.

La solución que le di a este problema, fue darle un alto a una capa div que está en la página principal (la que se carga con include) que se muestra, de modo que quede "justo" en el bottom. Con esto cuando hay poco contenido, el alto de la capa div, será el justo para que no quede espacio en blanco.

Muchas gracias por la idea.

[kisquian]

Deberías colocarle al footer clear:both, y el div del html por fuera de "contenido" :).