Problema con propiedades de Divs

[kenproxd]

Hola,

Este problema es un tanto difícil de explicar, espero que puedan entender y ayudarme.

Resulta que tengo dos Divs (#page y #footer) y cuentan con las siguiente propiedades:

Código CSS:

#footer {
    position:absolute;
    overflow:hidden;
    left:0px;
    right:0px;
    bottom:0px;
    background:#dddddd;
    color:#9b9a9a;
    padding:10px 25px 10px 25px;
    z-index: 3;
}
 
#page {
    position: absolute;
    overflow: hidden;
    margin-bottom: 50px;
    top: 45%;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 50px;
    z-index: 3;
}
 

Trataré de explicarlo con imágenes. Lo que obtengo es esto:



Hasta ahí todo bien. El problema es que cuando se cambia el tamaño de la ventana o se ve en una resolución más baja obtengo lo siguiente:



El div #footer no respeta el margin-bottom de #page, y bueno, por estar en position:absolute es obvio que no lo haga, pero esa es justamente mi duda, ¿cómo hago para que#footer esté siempre al final de la página, y que, si por alguna razón #footer y #page se encuentran no se superpongan? (imagen de ejemplo)



Espero que se haya entendido y puedan ayudarme. Saludos!