La tecnica più impiegata per costruire un layout a due o più colonne utilizzando i CSS è sicuramente quella che si basa sulla proprietà float assegnata ai box che costituiscono le colonne.

Questa tecnica è anche definita metodo delle faux columns poiché, nel momento in cui le colonne devono avere colori di sfondo differenti, è sufficiente rendere flottante anche il box contenitore delle colonne ed assegnargli un’immagine di sfondo che, appunto, disegna le colonne rendendole in apparenza eguali in altezza.

In effetti, un box flottante risulta alto quanto basta a contenere il suo contenuto ma il box contenitore, essendo a sua volta flottante, conterrà entrambe le colonne per intero e la ripetizione sull’asse Y dell’immagine di sfondo garantisce che le colonne risultino – apparentemente – alte uguali: da qui, la denominazione di “finte colonne”.

Questa tecnica è consolidata da tempo e risulta compatibile con tutti i browser, recenti e meno recenti (attenzione ai bug di IE6 e precedenti ma questi browser sono considerati obsoleti e quindi non più supportati).

Una tecnica emergente è quella che si basa sulla dichiarazione display: table-cell applicata ai box che compongono le colonne.

Continua a leggere→