MoebiusMania

Uno dei casi più comuni nel design CSS è quello di suddividere del testo in più colonne, con gli standard attuali l'unico modo "rapido" per ottenere l'effetto è quello di creare tre elementi, per esempio tre paragrafi, e creare una regola che imposti una larghezza fissa e il float verso destra o sinistra di questi, come in questo esempio. Fortunatamente con il nuovo standard alle porte CSS3, la questione è gestibile con delle proprietà più adatta e maggiormente intuitive!

/* il numero di colonne nei quali vogliamo suddividere il testo */
column-count: 3;
/* impostiamo la distanza tra le colonne */
column-gap: 10px;
/* per settare la larghezza delle colonne */
column-width: 200px;
/* per creare un bordo che divida le colonne */
column-rule: 1px solid gray;

Provate a vedere questo codice in azione! PS: ricordatevi i suffissi -webkit- e/o -moz- per vedere funzionare queste proprietà su Chrome, Safari e Firefox, potete utilizzare Prefixr per questo!