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.

Tramite questa dichiarazione, in effetti, gli elementi <div> delle colonne si comportano a tutti gli effetti come elementi <td>, ovverosia come celle di una stessa riga di una tabella.

Di conseguenza, si dispongono una di fianco all’altra ed assumono tutte la medesima altezza, rendendo così possibile assegnare i colori di sfondo tramite la proprietà background-color.

Clicca qui per visualizzare un esempio semplificato di questa tecnica.

Il limite fondamentale all’impiego di questa tecnica è che Internet Explorer 7 (e precedenti) non supporta il valore table-cell assegnato alla proprietà display.
Occorre dunque prevedere un foglio di stile alternativo per questo browser, nel quale il layout sia costruito con il metodo tradizionale dei float, servito tramite i commenti condizionali.
Posto questo pare ragionevole concludere che, almeno per il momento, il metodo tradizionale risulta ancora preferibile in quanto assicura un’ampia compatibilità ed è consolidato nella pratica di sviluppo dei layout.

AGGIORNAMENTO: Internet Explorer 7 è considerato con piena ragione un browser obsoleto, pertanto il fatto che esso non supporti la tecnica illustrata in questo articolo non costituisce più un problema. La scelta tra il metodo delle faux columns e questo dipenderà pertanto dalle preferenze dello sviluppatore, fermo restando che dovendo applicare colori di sfondo alle colonne l’uso della proprietà display: table-cell appare più pratica.

Nella costruzione delle media-query sarà sufficiente modificare il valore di questa proprietà in display: block; per fare disporre le colonne una sopra l’altra (impostandone altresì la corretta larghezza).