CSS  »  Guide  »  Guida CSS di base 

Quando si realizza un layout a due colonne spesso succede che una delle due colonne ha meno contenuti dell’altra e, se essa contiene un colore di backgroud differente, si ha uno sgradevole effetto “tagliato” come in Figura 1.

Figura 1 - Effetto "tagliato"

Possiamo vedere da vicino l’effetto nel seguente esempio.

Nell’esempio precedente abbiamo una struttura HTML come la seguente:

<div id="container">
    <div id="wrapper"></div>
    <div id="sidebar"></div>
</div>

ed una regola CSS che applica lo sfondo alla sidebar:

#sidebar { background-color: #f1f1f1; }

Per risolvere il problema dobbiamo semplicemente invertire i colori di background. Nel dettaglio: imposteremo un colore di background al div contenitore (#container) uguale a quello della barra destra (#sidebar) ed imposteremo un background di colore bianco al div principale (#wrapper).

Il codice CSS, quindi, sarà il seguente:

#container { background: #f1f1f1; }
#wrapper { background: #fff;  }

Figura 2 - Sidebar con altezza piena

Possiamo vedere il risultato finale nell’immagine di Figura 2 e, soprattutto al seguente link:

Esempio

Altri articoli

Altre guide

Altre newsletter