Vista l'enorme diffusione di monitor 16:9 o 16:10 gli utenti del web hanno ormai ampi spazi di visuale orizzontale ma scarsi spazi in verticale; se con layout a larghezza fissa il problema non si pone, con layout fluidi ci si può imbattere in testi disposti in maniera troppo ampia, difficili da leggere.

L'approccio ottimale sarebbe quello di disporre i testi in aree più piccole, che facilitino l'occhio del lettore nel rientro a capo e non lo costringano a faticosi ed ininterrotti spostamenti da sinistra a destra: la suddivisione in colonne tramite la proprietà CSS3 multi-column può fare al caso nostro.

Il supporto di tale proprietà è però limitato a 2 browser: Firefox e Safari. Questi browser tra l'altro non interpretano la proprietà secondo lo standard del W3C, ma hanno bisogno del loro prefisso proprietario (rispettivamente -moz e -webkit).

.dueColonne {<br />    column-count: 2;<br />    column-gap: 30px;<br />    column-rule: 1px solid #666;<br />    <br />    -moz-column-count: 2;<br />    -moz-column-gap: 30px;<br />    -moz-column-rule: 1px solid #666;<br />    <br />    -webkit-column-count: 2;<br />    -webkit-column-gap: 30px;<br />    -webkit-column-rule: 1px solid #666;<br />    }

TESTO DIVISO IN 2 COLONNE
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.

Il primo terzetto di proprietà è dichiarato nella maniera standard definita dalle specifiche, indicando il numero di colonne da impostare (count), la distanza fra le colonne (gap) ed un eventuale bordo (rule) con sintassi contratta uguale a quella della proprietà border (dimensione, stile, colore). Se non volessimo righe di separazione sarà sufficiente omettere l'attributo column-rule.

Gli altri due terzetti non fanno altro che ripetere la stessa istruzione, ma con l'aggiunta dei prefissi proprietari che rendono comprensibile il comportamento a Firefox e Safari. Se state navigando con browser diversi da questi due vedrete ovviamente un'unica colonna. Allo stato attuale è quindi superfluo inserire le proprietà dichiarate in modo standard, visto che non saranno renderizzate da nessun browser.

In alternativa potremmo ricorrere all'attributo column-width per definire la larghezza di ogni singola colonna: in questo caso il numero di colonne verrebbe determinato dalla divisione fra spazio totale a disposizione e larghezza della singola colonna

.colonneFisse {<br />    column-width: 200px;<br />    column-gap: 30px;<br />    <br />    -moz-column-width: 200px;<br />    -moz-column-gap: 30px;<br />    <br />    -webkit-column-width: 200px;<br />    -webkit-column-gap: 30px;<br />    }

TESTO DIVISO IN COLONNE DA 200px
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.

Dal punto di vista semantico non ci sono problemi, dato che nel codice HTML il testo verrà strutturato in un unico elemento blocco. Tramite CSS verrà solo aggiunta una formattazione estetica atta a migliorare la lettura ed in assenza di supporto il contenuto verrà fruito comunque in maniera corretta.

Diverso è il discorso riguardante eventuali box affiancati (ad esempio 3 box di offerta di un tipico sito web di hosting): in questo caso la semantica ci impone di creare 3 div ognuno con il suo testo, visto che si parla di 3 argomenti diversi, ed affiancarli con altri metodi (display:inline-block se supportato, o con float:left); ricorrere al multi-column sarebbe una forzatura, oltre a non avere supporto universale.

Per cercare di ottenere l'impaginazione su più colonne in tutti i browser è possibile ricorrere a Javascript. Su cssscripting.com trovate l'approccio usato nella pagina demo Multi Column Layout Demonstration: supportato dai moderni browser e degrada bene in assenza di Javascript.