Layout a due colonne con il float

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