Il trucco non funziona sulle celle centrali perché è la "logica" che c'è sotto a "pensare" a questa struttura come se si trattasse effettivamente di una tabella. Con le tabelle infatti è "automatico" che una cella sia alta come tutte le altre sulla stessa riga. Con i CSS, i div (che non sono celle) sono indipendenti tra loro. Con i box 1, 2 e 3, la cosa funziona perché hanno un'altezza impostata forzatamente da CSS, mentre i box centrali hanno altezza variabile e quindi devono adattarsi ai loro contenuti. E' chiaro che se i contenuti di tali box non sono alti uguali, anche i box non lo saranno tra di loro.
Quello che devi fare è dare "l'illusione" che i tre box 4, 5 e 6 siano alti uguali, anche se non lo sono. Per farlo devi racchiudere questi tre box dentro altri 2 box che faranno da contenitori (uno dentro l'altro e attribuire a questi box un'immagine di sfondo che "simuli" una delle 2 colonne (cioè un'immagine, alta anche 1px, di un colore che indentifichi lo sfondo di una delle colonne laterali, e ripetuta verticalmente). Il box 5, avendo entrambe le dimensioni variabili, devi impostarlo come il box 2 in larghezza e in altezza usare l'hack della min-height (IE non la interpreta!) per assegnare cmq un'altezza minima di default. Questo perché, essendo il box 5 posizionato in modo statico, ti serve per influire sull'altezza dei box 4 e 6 che sono flottanti (se i due box che inserisci come contenitori degli sfondi contenessero solo box flottanti, avrebbero altezza nulla). Nel dettaglio, eccotiun codice di esempio:
codice:
Codice XHTML:
<div id="cella1">...</div>
<div id="cella2">...</div>
<div id="cella3">...</div>
<div id="sfondocolonnasx">
<div id="sfondocolonnadx">
<div id="cella4">...</div>
<div id="cella5">...</div>
<div id="cella6">...</div>
</div>
</div>
<div id="cella7">...</div>
<div id="cella8">...</div>
<div id="cella9">...</div>
Codice CSS per i box "contenitori" e i box 4, 5 e 6:
#sfondocolonnasx {
background-image: url(IMMAGINE DI SFONDO COLONNA SX);
background-repeat: repeat-y;
background-position: top left;
}
#sfondocolonnadx {
background-image: url(IMMAGINE DI SFONDO COLONNA DX);
background-repeat: repeat-y;
background-position: top right;
}
#cella4 {
width: XXpx;
float: left;
}
#cella5 {
min-height: YYpx;
height: auto !important;
height: YYpx;
margin: 0 XXpx 0 XXpx;
}
#cella6 {
width: XXpx;
float: right;
}
Questo codice fa sì che sia il box 5 (l'unico box statico dei tre centrali) a determinare l'altezza dei due box "contenitori" sfondocolonnasx e sfondocolonnasx. Ovviamente, la misura di min-height deve essere tale da poter sempre "contenere" completamente le due colonne 4 e 6, che altrimenti fuoriuscirebbero (non su IE naturalmente... 
) dai box contenitori che danno l'illusione delle 2 colonne laterali. Dovrebbe funzionare così.
Rispondi quotando
