Dividere una sezione in tre colonne

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.