Problème positionnement Footer

Bonjour,

Je suis face à un casse tête en CSS que je n'arrive pas à solutionner.
C'est pourquoi je fais appel à vous.
Si ma page n'occupe pas tout l'écran je souhaiterai que mon footer soit tout de même positionner en bas de l'écran.
Si ma page est plus haute que l'écran (scroll vertical) je souhaiterai que le footer soit en bas de ma page après mon contenu. Accessible donc en scrollant vers le bas.

Voici mon architecture :

<div id="wrap">
        <div id="header"></div>
        <div id="menu"></div>
        <div id="content"></div>
        <div id="footer"></div>
</div>

Voici mes styles :

#wrap {
    position: relative;
    margin: 0px auto;
    width: 900px;
    background: none repeat scroll 0% 0% #FFF;
    height: auto !important;
    min-height: 100%;
}
#content {
    padding: 0px 10px 25px;
}
#footer {
    position: absolute;
    left: 0px;
    background-position: 50% 100%;
    height: 18px !important;
    font-size: 7pt;
    text-align: center;
    line-height: 18px;
    width: 100%;
    bottom: 0px;
}

Ce qui se passe actuellement :
Quand la page n'occupe pas tout l'écran, le footer est bien en bas, aucun souci.
Quand le contenu est plus haut que l'écran, le footer est en bas de l'écran, et non à la fin de mon contenu, et lorsque je scroll, le footer vient aussi et reste positionné au milieu de mon contenu.

Help please.