Layout a tre colonne con float: separare le colonne

17 marzo 2006

Per delimitare spazialmente o cromaticamente le colonne si può ricorre ai bordi e al background-color. Per separarle grazie ai bordi, basterà aggiungere i due bordi laterali alla colonna centrale. Ecco il codice da aggiungere:

div#content{
    /* … */
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
    }

Ecco quindi il layout a tre colonne con i bordi.

Mentre per il colore le regole aggiuntive saranno:

div#container{background-color: #ccc}
div#content{ /*…*/ background-color: #fff}

Anche qui vediamo il risultato.

Lo svantaggio principale di queste due soluzioni è che impongono il limite sulla lunghezza relativa delle colonne: infatti la colonna centrale dovrà essere la più lunga. La soluzione è usare le immagini di background. Sarà l’argomento della prossima lezione.

Scarica lo zip di questa lezione

3cf.zip
Tutte le lezioni

1 ... 26 27 28 ... 41

Se vuoi aggiornamenti su Layout a tre colonne con float: separare le colonne inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Layout a tre colonne con float: separare le colonne

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing