Il div centrale non terrà mai conto dell'altezza dei due div position: absolute che contiene, perché come hai detto tu, giustamente, gli elementi posizionati non in modo statico sono estratti dal flusso del documento e non influenzano la disposizione degli altri elementi.
Hai 2 soluzioni possibili:
1. Imposti i 2 div che ora sono position: absolute come flottanti a sinistra (float: left) e dopo di essi (ma sempre dentro il div centrale che li contiene) aggiungi un elemento vuoto come un
a cui applichi una classe per "ripulire il float", in questo modo:
codice:
Codice XHTML:
<br class="clear" />
Codice CSS:
.clear {
clear: left;
}
Così facendo, il div centrale assume la stessa altezza dei 2 div flottanti (perché il
con la classe clear ripulisce il float e quindi reimposta normalmente la visualizzazione dei box successivi a quelli flottanti). Perciò, il footer (che è successivo al box centrale) viene mostrato sempre sotto tale box e di conseguenza, sotto ai due box flottanti.
2. Lasci position: absolute solo uno dei due box contenuti nel div centrale. E' importante che tu conosca a priori quale dei due box sarà sempre quello più alto. Questo box infatti andrà posizionato in modo statico (basta non specificare position nella sua regola di stile) e quindi influirà sul layout tenendo in basso il footer. Ovviamente, quel box dovrà avere un margine sinistro (o destro, a seconda di quale dei due box scegli) pari alla larghezza dell'altro box posizionato in modo assoluto.
Se non sai a priori quale dei due box sarà sempre il più alto, puoi sceglierlo arbitrariamente e assegnarli un'altezza minima tale da riuscire sempre a superare l'altro box. Per farlo, ricorri all'hack per la min-height (IE non la interpreta altrimenti!):
codice:
min-height: ALTEZZA MINIMA IN PIXEL;
height: auto !important;
height: ALTEZZA MINIMA IN PIXEL;
Rispondi quotando
.
