Il supporto di testo su più colonne è previsto solo con i CSS3. Quello che
vedremo qui è come ottenere dei paragrafi distinti su più colonne.
Questa impostazione è tipica di molti siti dedicati all'informazione, per
avere una stretta somiglianza con i quotidiani e per questioni legate alla leggibilità.
Nel 99% dei casi, questi siti adottano le tabelle per organizzare contenuti su
più colonne nella sezione centrale. Una nota va fatta per quanto riguarda il dimensionamento
dei font: una misura fissa è anche in questo caso la scelta più semplice e più
stabile, ma meno accessibile.
Vedremo in questo paragrafo come realizzare un div suddiviso in due sezioni
di pari larghezza. Con questa tecnica è anche possibile suddividere la colonna
centrale di un layout a tre colonne ottenendo facilmente un layout a quattro colonne.
Ecco il codice HTML:
<div class="split2">
<div>
<h2>Paragrafo 1</h2>
<p>Testo del paragrafo 1..</p>
</div>
<div>
<h2>Paragrafo 2</h2>
<p>Testo del paragrafo 2..</p>
</div>
<div class="clearer"> </div>
</div>
Ora aggiungiamo un tocco di stile..
div.split2 div{
float: left;
width: 45%;
width: 49%;
width: 45%;
padding: 0 2%
}
div.clearer{
float: none; clear: left
}
Per ora non sono stati previsti stili sul contenitore, ma questi potrebbero
coinvolgere larghezza, margini o padding. Il punto centrale di questo approccio
è l'uso del selettore discendente: i due div contenuti all'interno del
contenitore identificato dalla classe split2 saranno resi float e avranno
una larghezza effettiva (padding incluso) pari al 49%. Si è usata la versione
semplificata del box model hack per rendere il comportamento uguale tra i vari
browsers.
Quello che risulta è un codice HTML minimale e un'unica regola CSS abbastanza
snella. Anche in questo caso l'uso del clear è necessario per impedire
agli elementi successivi alle due colonne di subirne il float. Per non aggiungere
div non strutturali è possibile dare il clear sull'elemento successivo al div
con classe split2. È il caso dell'esempio,
in cui il clear viene dato sul div successivo.