footer con posizionamento assoluto

[elysaweb]

Ciao a tutti. Ho un problemone con questo layout che posto in allegato.

In pratica ho il body che ha una texture come sfondo, poi ho un top che ha una fascia con gradiente + texture, e un bottom che ha sempre gradiente + texture. Questo è lo sfondo, e non posso fare una fascia unica perchè se la pagina è più alta poi viene ripetuto e non è il massimo.
I contenuti vanno in un div centrato rispetto alla pagina, e che va parzialmente sopra il top.

Per fare ciò ho creato due div (top e bottom), con il gradiente+ texture come sfondo, e li ho posizionati in modo assoluto, così:

#top {
	position:absolute;
	top: 0;
	left: 0;
	width:100%;
	height:120px;
	padding:0;
	margin:0;
	background: url(../img/layout/back_top.jpg) repeat-x top left;
	text-align:center;
	z-index:1;
}
#bottom {
	position:absolute;
	bottom: 0;
	left: 0;
	width:100%;
	height:100px;
	padding:0;
	margin:0;
	background: url(../img/layout/back_bottom.jpg) repeat-x bottom left;
	z-index:1;
}

In modo che il top sia sempre in alto e il bottom sia sempre in basso.

Poi ho creato un div contenitore che sia centrato rispetto alla pagina, e non posizionato in modo assoluto:

#wrapper{
	position:relative;
	margin:0 auto;
	padding:0;
	width:810px;
	text-align:center;
	z-index:10;
}

Gli ho dato uno z-index:10 in modo che stesse sopra ai div assoluti.

Ora però c'è un problema: io non voglio che il wrapper vada sopra al bottom, ma se io dò un margine inferiore al wrapper, succede che il bottom resta più alto rispetto alla fine della pagina, creando un effetto sgradevolissimo.
Come posso fare perchè il bottom stia in basso e venga DOPO tutti i contenuti del wrapper?
Spero di essermi spiegata.

[pr0v4]

Togli la posizione relativa, e il footer dovrebbe posizionarsi al di sotto dei contenuti.

Se la risposta e' sbagliata e' probabile che non abbia capito bene il problema :P