Allo stesso modo dell'esempio precedente è possibile suddividere un div in
tre o più colonne. Vediamo brevemente il codice HTML:
<div class="split3">
<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>
<h2>Paragrafo 3</h2>
<p>Testo del paragrafo 3..</p>
</div>
</div>
<div class="clearer"> </div>
</div>
Ed ecco il css minimale:
div.split3 div{
float: left;
width: 29%;
width: 33%;
width: 29%;
padding: 0 2%
}
Ecco il risultato.
Sia questo esempio che il precedente usano un contenitore semi-fluido per contenere
le colonne. Stringendo la finestra del browser tuttavia si noterà che le due colonne
hanno comportamenti totalmente differenti sui vari browsers: scivolano in verticale
una sopra l'altra (in IE), si sovrappongono l'un l'altra (Opera) oppure vengono
tagliate dalla finestra del browser senza generare scrolling (Mozilla). Per evitare
queste enormi differenze di comportamento in casi limite, è consigliabile disporre
le due o tre colonne in un contenitore a larghezza fissa o elastico, che in tutti
i browsers genererà scrolling se la finestra del browser è troppo stretta.