Problema sovrapposizione DIV

[miki92]

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

Il codice è:

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

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

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

#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?

[karl94]

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?

[miki92]

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