Una variante del layout con posizionamenti assoluti

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