Problema sovrapposizione DIV

Buongiorno,
ho un documento html formato da soli 3 DIV che sono rispettivamente: header, main e footer.

Il codice è:

Codice HTML:

---

<div id="header">
 <div class="box">...</div>
</div>

 <div id="main" class="box"> ... </div>

<div id="footer">
 <div class="box"> ... </div>
</div>

---

Codice:

---

#header{ position:absolute; top:0; }

#main{background-color:#fff}

#footer{ position:absolute; bottom:0; }

.box{ margin:0 auto; width:300px; }

---

Con questo codice visualizzo solo header e footer correttamente. Impostando al #main un position:relative viene visualizzato il testo ma sopra all'header e devo impostare un margin-top per farlo visualizzare nella posizione corretta.

Come risolvo?

Perché hai necessità di posizionare l'header in maniera assoluta? Ed il footer? Potresti indicare una pagina di esempio che mostri il risultato che vorresti ottenere?

Effettivamente mi sono posto la stessa domanda riguardante l'header. Di fatti ho eliminato l'absolute ed il top all'header ed ho utilizzato margin:0 per il body così da avere l'effetto che mi occorreva.

Purtroppo se le idee ti vengono all'1 di notte non è detto che siano sviluppate bene xD