Il layout che abbiamo visto non dà vincoli sulla lunghezza relativa delle due
colonne. Se sappiamo a priori che in tutte le pagine in cui useremo un layout
a due colonne con i float la colonna dei contenuti sarà più lunga della colonna
di navigazione, possiamo facilmente separare le due colonne. Le due soluzioni
che possiamo adottare sono:
- separare le due colonne con un bordo fine;
- separare le due colonne con l'uso del colore.
Vedremo qui di seguito come poter avere le due colonne di colore distinto,
e soprattutto avere l'effetto che la colonna di navigazione si estenda fino al
footer. Allo stesso modo, è possibile assegnare solo un border-right
al div dei contenuti.
Layout a due colonne cromatiche
Vogliamo assegnare un colore diverso alle due colonne, ed avere l'idea che
la colonna secondaria si estende cromaticamente fino al footer. Se ci avete già
provato, avrete visto che giocare con l'altezza non ha effetto. Il trucco è semplice:
invece di assegnare un colore di sfondo alla navigazione, assegniamo un colore
di sfondo al container e al div principale. In questo caso la navigazione
erediterà il colore del container e darà l'impressione di estendersi fino al footer.
Ecco allora il layout con due colonne di colore
diverso.
Un limite che si può superare
I problemi però non mancano. Ecco
come rende il layout dell'esempio precendente nel caso in cui la colonna secondaria
sia la più lunga.
C'è un'alternativa, che si rivela efficace in entrambi i casi: usare un'immagine
di background per il contenitore principale. L'idea è semplice: usare un piccola
immagine alta pochi pixel da ripetere verticalmente su tutto il container. Questa
immagine deve essere larga quanto la navigazione, e implicitamente introduce una
condizione: la colonna di navigazione dovrà per forza essere dimensionata
in pixel.
Ecco come ottenere un background che si ripete verticalmente lungo tutto il
container:
div#container{
background: url(rightcol.jpg) repeat-y top right
}
Applicare questa soluzione è semplicissimo: basterà realizzare una piccola immagine del colore che vogliamo con un qualsiasi
programma di grafica. Ed ecco il layout a due colonne con background, anche nel caso in cui
la colonna di navigazione sia la più lunga.
Scarica lo zip di questa lezione