Salve a tutti,
ho un problema con il footer di un layout che mi sta facendo impazzire..
http://candybonbon.altervista.org/prove/index.html qui potete vedere cio che ho realizzato..
In pratica ho voluto creare un header e un footer al esterno del div contenitore per poter sfruttare la larghezza totale della pagina.. il problema si presenta quando creo il footer.
Per posizionarlo ho usato la guida qui di html per far si che stia sempre in fondo alla pagina ma quando provo a ridimensionare nel browser il footer passa sopra ai contenuti mentre io invece vorrei che si bloccasse quando gli si scontrano... credo che il problema sia dato dal fatto che ho dato al footer un position absolute ma è l'unico modo che ho trovato per posizionare li quel div..

posto il codice per essere piu chiaro:
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
height:75px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 10px 0px 0px 0px;
min-width:900px;
}
#navigation {
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #ccc;
margin: 0px 0px 0px 0px;
background-color:#F3F2ED;
}
#content {
height:100%;
width: 900px;
color: #333;
border: 1px solid #ccc;
background:#CCC8B3;
margin: 0px 0px 0px 0px;
padding: 10px;
}
#footer {
width:100%;
color: #333;
border: 1px solid #ccc;
background-color:#F3F2ED;
margin: 0px 0px 10px 0px;
padding: 10px;
position: absolute;
bottom:0;
}

HTML:
<body>
<div id="header"> </div>

<div id="wrapper">
<div id="navigation"> Navigation Here </div>
<div id="content"> Content Here</div>
</div>
<div id="footer"> This is the Footer </div>
</body>

qualcuno ha qualche idea di come potrei risolvere? è tutto il giorno che ci sbatto la testa

grazie mille per l'aiuto.