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 &copy;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.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

15 commenti

  1. iteand
  2. QKappa
    • QKappa
  3. Antonio
    • Antonio
  4. iteand
  5. Andrew

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *