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