A differenza delle tabelle, che abituano a considerare le celle di una riga sempre della stessa altezza, i box sono indipendenti. Quindi non avranno mai (a meno che non l'abbiano i loro contenuti) un'altezza uguale tra di loro.
Quello che i CSS permettono è dare l'"illusione" che le colonne siano alte uguali. Per farlo è necessario inserire un box "ad hoc" che racchiuda tutti i box che generano le colonne.
codice:
<div id="corpo">
<div id="left">...</div>
<div id="content">...</div>
<div id="right">...</div>
</div>
Suppongo che il box "content" sia l'unico non flottante (e quindi statico) che ha i margini destro e sinistro uguali alle larghezze delle due colonne laterali. Se è così, e quindi il box "corpo" non contiene solo box flottanti, l'altezza di tale box (da non impostare nel CSS) sarà uguale all'altezza del box più alto che esso contiene (presumo "content").
Se le colonne hanno larghezza fissa, la cosa è molto semplice: imposti via CSS il background del box "corpo" con un'immagine larga esattamente come questo box, alta 1px e ripetuta verticalmente.
L'immagine dovrà essere divisa in 3 "aree", ognuna di colore diverso, larghe quanto le tre colonne.
codice:
#corpo {
width: LARGHEZZApx;
background-image: url(IMMAGINE_SFONDO);
background-repeat: repeat-y;
}
LARGHEZZA è ovviamente la larghezza del box "corpo" tale da contenere esattamente i 3 box delle colonne.
Se però le tue colonne sono a larghezza variabile o sono tutte flottanti, il codice qui sopra va modificato per poter funzionare.
Ovviamente con questo codice ottieni che tutte e tre le colonne diano l'illusione di essere alte uguali (compresa quella dei contenuti).
Se volessi dare l'illusione che solo le 2 colonne flottanti siano alte uguali, è un'altra cosa, e più complessa.
Al limite, facci sapere...
Rispondi quotando
