Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 35 di 41
  • livello principiante
Indice lezioni

Dividere una sezione in due colonne

Un'impaginazione di tipo giornalistico - I
Un'impaginazione di tipo giornalistico - I
Link copiato negli appunti

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.


Ti consigliamo anche