Pillola CSS: come realizzare un layout fisso a tre colonne?
Nella pillola della scorsa settimana abbiamo visto come realizzare un layout fisso a due colonne. Sono sempre più diffusi però – complice l’aumento esponenziale della risoluzione dei monitor – i layout a tre colonne. Come fare dunque per aggiungere un’ulteriore colonna?
Opporre i float
Il concetto alla base del layout fisso a tre colonne rimane sempre l’opposizione dei float, ovvero effettuare il float di due elementi consecutivi nel markup, uno a destra e l’altro a sinistra, permettendo di affiancare i due elementi.
Per il layout a due colonne dell’esempio della scorsa settimana, il contenuto principale (la ricetta) veniva flottato a destra, mentre il contenuto secondario (gli ingredienti) a sinistra, in questo modo:
Il markup di riferimento era il seguente:
... <body> <div id="testata"> <h1>Titolo del mio sito</h1> </div> <div id="ricetta"> <h2>Istruzioni</h2> <p>Introduzione...</p> <ol> <li>Istruzione 1</li> <li>Istruzione 2</li> .... </ol> </div> <div id="ingredienti"> <h2>Ingredienti</h2> <ul> <li>Ingrediente 1</li> <li>Ingrediente 2</li> <li>Ingrediente 3</li> ... </ul> </div> <div id="note_legali"> <p>Copyright ©2010 Il mio sito originale</p> </div> </body> ...
Per il layout a tre colonne utilizziamo lo stesso ragionamento: creiamo due colonne, flottandone una a destra ed una a sinistra e poi, all’interno di una di queste colonne, ne creiamo altre due, ottenute sempre opponendo i float. In questi casi, un semplice diagramma esplicativo vale più di mille parole:
Per realizzare tale layout, dobbiamo modificare leggermente il nostro markup, inserendo un div aggiuntivo, contenente due delle nostre tre colonne:
... <!-- contenitore --> <div id="contenitore-ricetta"> <!-- colonna centrale --> <div id="ricetta"> <h2>Istruzioni</h2> <p>Introduzione...</p> <ol> <li>Istruzione 1</li> <li>Istruzione 2</li> .... </ol> </div> <!-- colonna di destra --> <div id="ingredienti"> <h2>Ingredienti</h2> <ul> <li>Ingrediente 1</li> <li>Ingrediente 2</li> <li>Ingrediente 3</li> ... </ul> </div> </div> <!-- colonna di sinistra --> <div id="ricette-simili"> <h2>Ricette simili</h2> <ul> <li>Panettone della nonna</li> ... </div> ...
Come vedi, abbiamo inserito il div con ID “contenitore-ricetta”, che contiene la ricetta e gli ingredienti, e aggiunto una terza colonna, “ricette-simili”.
Passiamo ora al CSS: vogliamo che il nostro layout sia largo 1000 pixel, e che le due colonne laterali siano larghe 200 pixel ciascuna. Iniziamo con il float delle due colonne più esterne, “contenitore-ricetta” e “ricette-simili”:
...
#contenitore-ricetta {
float: right;
}
#ricette_simili {
float: left;
width: 200px;
}
...
E procediamo con l’opposizione dei float delle colonne interne, “ricetta” e “ingredienti”:
...
#ricetta {
float:left;
width:600px;
}
#ingredienti {
float:right;
width:200px;
}
In questo modo, come puoi vedere nell’esempio siamo riusciti ad ottenere un solido layout fisso a tre colonne, semplicemente adattando un layout a due colonne.
Considerazioni
Come avrai potuto notare, in questi due esempi ho sempre e solo lavorato con la proprietà “width” (larghezza) dei vari componenti: volevamo ottenere un layout di 1000 pixel e abbiamo definito due colonne da 200 pixel ed una da 600 pixel, occupando tutto lo spazio disponibile. senza utilizzare margini, bordi o padding, con il risultato che i vari componenti sono quasi accavallati l’uno all’altro.
La chiave per il corretto utilizzo di questi elementi di spaziatura orizzontale è la comprensione del box model, argomento che tratteremo nel prossimo articolo.
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
15 commenti
Trackback e pingback
Non ci sono trackback e pingback disponibili per questo articolo
the power of opposite!
grande just
Grazie iteand,
mi dai la licenza per usare questa citazione? :D
Interessante, perché stupidamente non avevo mai pensato a cacciare due div dentro un’altro..
Mi viene una domanda, spero di non dire cavolate e che nessuno mi cacci se mi scappa un’eresia: ma creando tre div e dando float:left ai primi due non funziona uguale? O meglio (visto che l’articolo dice di fare in maniera diversa) che problemi darebbe al layout della pagina?
Ciao QKappa,
come ho detto nello scorso articolo, questo non è “il” metodo per realizzare questo layout, ma solo “un” metodo :)
Quello che dici tu è esatto: si potrebbero flottare tutti i div a sinistra (o ugualmente a destra): il problema è che poi l’ordine degli elementi nel markup non rifletterebbe quello logico, ovvero dovresti mettere prima gli elementi secondari, e poi quello principale.
D’altra parte, il metodo utilizzato in questo articolo, non va bene per layout con più colonne (immagina di vole affiancare cinque box) poiché ci sarebbero troppi div inutili: a quel punto si potrebbe flottare su un unico lato e poi giocare con i margini negativi per posizionare i vari elementi nel giusto ordine.
Sei stato chiarissimo. Grazie ancora
Non ho mai avuto modo di fare un layout a tre colonne, ma non avevo mai pensato di farlo così… interessante, grande Just!
Grazie Antonio,
come sempre il segreto é cercare di vedere le cose da tante angolazioni diverse, così da avere sempre il quadro più chiaro e migliorarsi sempre :)
concordo perfettamente :)
certo just con piacere gpl
Non ho ancora realizzato un layout a 3 colonne, ma neanche io avrei pensato ad usare i float opposti tra loro all’interno di un altro div, grazie mille per la pillola!
Questo trucchetto l’ho trovato molti anni fa, guardando il codice di qualche sito, e ho pensato che condividerlo sarebbe stata una cosa buona ;)
nn ti ricordi il nome del sito da dove l’hai preso?
cmq se io volessi fare una cs più diversa ovvero x creare una pagina e usare un layout con div fisso e mettere un box a sx uno centrale e uno dx cm devo fare?
L’autore scrive:
“La chiave per il corretto utilizzo di questi elementi di spaziatura orizzontale è la comprensione del box model, argomento che tratteremo nel prossimo articolo.”
Ehmm può considerarsi il collegamento a questo bellissimo articolo, quello di seguito riportato ?
http://www.yourinspirationweb.com/2010/03/19/pillole-css-che-cose-il-box-model-e-come-sfruttarlo-per-i-nostri-layout/
Grazie :)
esattamente, è proprio quello l’articolo a cui faceva riferimento just e vedo che sei riuscito a trovarlo.
in effetti in questa serie di articoli abbiamo dimenticato di aggiungere un indice in modo da renderne più agevole la consultazione.
Grazie per il riscontro.. come ho detto in più occasioni.. tutto perfetto.. andrebbe, secondo il mio modesto parere, rivisto (in alcuni casi) solo il collegamento logico e cronologico tra i varti articoli (forse con dei tag ?) in modo da far individuare all’utente tutto quello che cerca in unico spazio e da ingressi diversi :)