CSS  »  Guide  »  Guida Layout dei siti con i CSS 

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

Altri articoli

Altre guide

Altre newsletter