Div footer sempre in basso

[Iron83]

Ciao a tutti,

sto costruendo un layout suddiviso in questo modo:

html

<div id="contenitore">
  <div id="logo"></div>
  <div id="promo"></div>
</div>
<div id="wrapper"></div>
<div id="footer"></div> 

css

body {
height: 100%;
}

#contenitore {
width: 980px !important;
width: 980px;
text-align:left;
margin:0 auto auto auto;
padding:0;
height: 100% !important;
height: 100%;
min-height: 100%;
min-height: 100%;
}

#wrapper {
width: 100%;
min-width: 100%;
height: 100%;
min-width: 1400px;
height: 221px;
background: url('immagini/bg_wrapper.png') repeat-x;
margin-top: 20px;
position: relative;
}

#footer {
width: 100%;
height: 103px;
position: absolute;
bottom: 0;
background: url('immagini/bg_footer.png') repeat-x;
} 

praticamente la pagina è formata da un div contenitore con altezza al 100% centrato, sotto un div con lunghezza e altezza 100% wrapper e sotto il footer piazzato sempre in basso.

Il punto è che il footer resta sempre attaccato al bordo basso della finestra di navigazione, il problema però sta nel resize della pagina o nella visualizzazione ad una risoluzione più bassa del sito.

Infatti il footer alla riduzione della pagina sale passando sopra gli altri div, il risultato è che se ho una risoluzione 1024X760 il div footer starà sopra al div wrapper...

Come posso risolvere?

Grazie