CSS  »  Guide  »  Guida Layout dei siti con i CSS 

Abbiamo già visto come ottenere le due colonne laterali in tinta: si assegna un colore al container e il bianco al div principale. Il risultato è che le colonne laterali danno l'impressione di estendersi fino al footer, dato che è la colonna centrare a consentire il flusso di elementi.

Finora, inoltre, abbiamo visto che la soluzione per distanziare la colonna centrale dai lati della finestra è aggiungere i margini, in modo da lasciare spazio per il posizionamento delle colonne centrali. L'idea alternativa è abbastanza semplice: usare un bordo spesso quanto i margini. Ecco le regole necessarie alla colonna centrale (il resto rimane invariato):

div#content{
    border-style:solid;
    border-width:0 170px;
    border-color:#000 #BDDEFF #000 #C3FFFF;
    padding: 1em 10px
    }

I bordi spessi hanno due funzioni: separare la colonna centrale per fare spazio a quelle laterali (sostituendo quindi i margini) e dare un colore alle due colonne secondarie. Ecco il risultato. Semplice vero? Ci sono due questioni però riguardo a questo layout. La prima è che Internet Explorer 5.x e 6 danno problemi di allineamento del testo del footer nel caso in cui i bordi spessi non siano larghi uguali: per qualche strano motivo sembra che il testo del footer soffra di una "traslazione laterale opposta" pari alla diffenza di larghezza dei due bordi.

È per questo che non ho proposto una variante con bordo spesso per il layout a due colonne, dato che la traslazione del testo del footer è proprio pari alla colonna secondaria. Sul layout a tre colonne, se i due bordi spessi sono larghi uguali non c'è problema: questi possono essere dimensionati in pixel, oppure in em per avere colonne laterali elastiche. La seconda questione è che mentre il background-color o le immagini di background non vengono stampate di default dai browsers, i bordi sì. Per ovviare a questo ci sono diverse possibili soluzioni, che comunque comportano lo specificare di un foglio di stile per la stampa.

Scarica l'esempio zip di questa lezione

Altri articoli

Altre guide

Altre newsletter