CSS Layout A 2 Colonne

Autore: Bocchi Cinzia
Ultimo aggiornamento: 20/03/2014

1
Layout a due colonne con i CSS

Il layout a due colonne adatto a siti di medie dimensioni e si compone solitamente di
cinque sezioni fondamentali:
header
navigazione principale
navigazione secondaria
contenuti
footer

La navigazione secondaria (sidebar) viene affiancata alla sezione contenuti, a sinistra o a
destra. Vediamo il codice HTML di questo layout:

<!DOCTYPE html>
<html>
<head>
<title>Layout a due colonne</title>
</head>
<body>
<div id="wrapper">
<div id="header">
LAYOUT A DUE COLONNE<br>
HEADER
</div> 
<div id="navigation">
NAVIGATION
</div> 
<div id="sidebar">
SIDEBAR
</div> 
<div id="content">
CONTENT
</div> 
<div id="footer">
FOOTER
</div> 
</div> 
</body>
</html>

Solitamente, per questo tipo di pagine la sidebar viene impostata ad una larghezza fissa,
mentre il content ad una larghezza in percentuale.
Nel seguito vengono mostrati tre diversi approcci per il layout proposto: il primo utilizza la
propriet position per affiancare le due colonne, il secondo la propriet float. Il terzo
approccio mostra un layout flexbox.

2

Accessibilit
Le persone ipovedenti o non vedenti utilizzano per navigare strumenti che leggono il
contenuto delle pagine html grazie a un sintetizzatore vocale. Per questo motivo, la
collocazione della sezione di navigazione (principale o secondaria) subito dopo lheader
pu risultare molto fastidiosa poich costringe allascolto di lunghi elenchi di link. Al
momento, la soluzione consiste nel fornire un link per saltare direttamente al contenuto
della pagina.

Layout a due colonne con i posizionamenti assoluti

Fig. 1 Esempio di layout a due colonne con sidebar
a sinistra e posizionamenti assoluti

/*Layout a due colonne con sidebar sinistra con posizionamenti assoluti*/
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 100%;
position: relative; /*nota 1*/
}
#header {
height: 100px;
margin: 0;

3
padding: 10px;

background-color: #334433;
color: #FFF;
}
#navigation {
height: 50px;
margin: 0;
padding: 10px;

background-color: #6699AA;
color: #FFF;
}
#sidebar {
width: 180px; /*nota 2*/
height: 350px;
margin: 0;
padding: 10px;
position: absolute; /*nota 3*/
left: 0;

background-color: #D0D1C5;
color: #000;
}
#content {
height: 350px;
margin: 0 0 0 200px; /*nota 4*/
padding: 10px;

background-color: #AACCCC;
color: #FFF;
}
#footer {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}

Le regole riguardanti il colore di sfondo (background-color) il colore in primo piano (color) e
laltezza (height) sono state aggiunte unicamente per rendere visibili le sezioni nella
pagina web.

4
Nota 1: la propriet position del wrapper relative per consentire di impostare
successivamente la propriet position absolute della sidebar. In questo modo la sidebar si
posiziona rispetto al wrapper e non rispetto alla finestra del browser.

Nota 2: si osservi che, nonostante la propriet width della sidebar sia impostata a 180
pixel, la larghezza totale di questa colonna di 200 pixel, poich occorre considerare
anche i 10 pixel di padding sinistro e destro.

Nota 3: la sidebar viene posizionata in modo assoluto a sinistra.

Nota 4: il margine sinistro della sezione content deve essere impostato a 200 pixel, che
coincide con la larghezza complessiva della sidebar.

a destra e posizionamenti assoluti

In questo caso occorre modificare la pagina HTML disponendo la sidebar dopo il content.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER

5
NAVIGATION
<div id="content">
CONTENT
<div id="sidebar">
SIDEBAR
<div id="footer">
FOOTER
</body>
</html>

Il foglio di stile diventa:

/*Layout a due colonne con sidebar destra con posizionamenti assoluti*/
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 100%;
position: relative;
}
#header {
height: 100px;
margin: 0;
padding: 10px;

color: #FFF;
}
#navigation {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}
#content {
height: 350px;
margin: 0 200px 0 0; /*nota 1*/

6
padding: 10px;

color: #FFF;
}
#sidebar {
width: 180px;
height: 350px;
margin: 0;
padding: 10px;
position: absolute; /*nota 2*/
right: 0;
top: 190px;

color: #000;
}
#footer {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}

Nota 1: il margine destro della sezione content deve essere impostato a 200 pixel, che
coincide con la larghezza complessiva della sidebar.

Nota 2: la sidebar viene posizionata in modo assoluto a destra ad una distanza dal top del
wrapper pari a 190 pixel, lunghezza che coincide con la quella dellheader pi quella della
sezione navigation.

Layout a due colonne con i float

Il codice HTML rimane lo stesso (sidebar prima del content). Per quanto riguarda i CSS,
nel seguito sono visibili i fogli di stile per i due casi; sidebar a sinistra e a destra.

/*Layout a due colonne con sidebar sinistra con float*/
body {
margin: 0;
padding: 0;
}
#wrapper {

7
margin: 0 auto;
width: 100%;
}
#header {
height: 100px;
margin: 0;
padding: 10px;

color: #FFF;
}
#navigation {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}
#sidebar {
width: 180px;
height: 350px;
margin: 0;
padding: 10px;
float: left; /*nota 1*/

color: #000;
}
#content {
height: 350px;
margin: 0 0 0 200px;
padding: 10px;

color: #FFF;
}
#footer {
height: 50px;
margin: 0;
padding: 10px;
clear: both; /*nota 2*/

color: #FFF;
}

8
Nota 1: la sidebar ha propriet float impostata a left.

Nota 2: la propriet clear consente di effettuare un corretto posizionamento del footer;
senza questa regola, se la sidebar risultasse pi lunga della sezione content, il footer si
disporrebbe appena sotto i contenuti e non sotto la colonna secondaria.

a destra e float senza clear nel footer

a destra e float con clear nel footer

Vediamo ora il CSS per la sidebar a destra.

9
/*Layout a due colonne con sidebar destra con float*/
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#header {
height: 100px;
margin: 0;
padding: 10px;

color: #FFF;
}
#navigation {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}
#content {
height: 350px;
margin: 0 200px 0 0;
padding: 10px;

color: #FFF;
}
#sidebar {
width: 180px;
height: 350px;
margin: 0;
padding: 10px;
float: right; /*nota 1*/

color: #000;
}
#footer {
height: 50px;
margin: 0;
padding: 10px;

10
clear: both;

color: #FFF;
}

Nota 1: la sidebar ha propriet float impostata a right.

Layout a due colonne con flexbox

Uno dei moduli pi interessanti della specifica CSS3 il flexbox (flexible layout module).
Flexbox permette di sistemare in maniera flessibile i box presenti allinterno di un elemento
contenitore, offrendo vari metodi per la gestione dellordine di visualizzazione dei box,
dello spazio disponibile e dellallineamento.

Per attivare il modello di layout flessibile occorre impostare la propriet display del
blocco contenitore al valore box. Al momento attuale tutti i browser le implementano le
propriet flexbox ricorrendo ai prefissi proprietari. Sar necessario, quindi, aggiungere
un blocco contenitore e per esso le seguenti propriet al blocco:

#container {
display: box; /*Opera*/
display: -ms-box; /*IE 10+*/
display: -moz-box; /*Firefox*/
display: -webkit-box; /*Chrome and Safari*/
}

Per impostare lorientamento dei box si usa la propriet box-orient, sempre nel
contenitore. Valori possibili sono: horizontal e vertical, con ovvio significato
1
. Tale
propriet non funziona con IE e Opera.

#container {
box-orient: horizontal;
-ms-box-orient: horizontal;
-moz-box-orient: horizontal; /*Firefox*/
-webkit-box-orient: horizontal; /*Chrome and Safari*/
}

1
Per approfondire si veda http://www.w3schools.com/cssref/css3_pr_box-orient.asp

11

Per impostare lordinamento dei box cio lordine con cui appariranno esistono due
possibilit.

La prima consiste nellutilizzare la propriet box-direction, la quale pu assumere i
valori normal (i box appaiono nellordine di default) o reverse (i box appaiono in ordine
inverso).

#container {
box-direction: normal;
-ms-box-direction: normal; /*IE 10+*/
-moz-box-direction: normal; /*Firefox*/
-webkit-box-direction: normal; /*Chrome, Opera and Safari*/
}

La seconda possibilit consente di specificare lordine di apparizione per ciascun box
mediante la propriet box-ordinal-group. In tal caso occorre indicare per ciascun box
un intero che ne specifica la posizione.

#container {
}

#sidebar {
box-ordinal-group: 1;
-ms-flex-order: 1; /*IE 10+*/
-moz-box-ordinal-group: 1; /*Firefox*/
-webkit-box-ordinal-group: 1; /*Chrome and Safari*/

12
}

#content {
}

I box possono avere una larghezza fissa o variabile in percentuale oppure possono
essere flessibili, cio occupare tutto lo spazio che hanno a disposizione. Per assegnare
a un box questultimo comportamento si utilizza la propriet box-flex, con valore
almeno pari a 1. Il valore della propriet box-flex deve essere inteso in questo modo:
se un box ha valore di box-flex pari a 2 significa che occupa uno spazio doppio rispetto
ai box che hanno la stessa propriet impostata a 1. Di conseguenza, se i box flessibili
sono pi di uno, essi si dividono lo spazio disponibile in modo equo, se la propriet
box-flex uguale a 1, o altrimenti lo spazio occupato si differenzier sulla base del
valore di box-flex. Nel nostro esempio, solo la sezione content deve essere flessibile,
mentre sidebar ha una larghezza fissa di 200 pixel.

#sidebar {
width: 200px;
}

#content {
box-flex: 1; /*Opera*/
-ms-box-flex: 1; /*IE 10+*/
-moz-box-flex: 1; /*Firefox*/
-webkit-box-flex: 1; /* Chrome and Safari*/
}

Altre propriet utili per lallineamento e la distribuzione dello spazio, che potete consultare
autonomamente, sono box-align
2
e box-pack
3
.

2
Vedere http://www.w3schools.com/cssref/css3_pr_box-align.asp
3
Vedere http://www.w3schools.com/cssref/css3_pr_box-pack.asp

13

Vediamo ora il codice HTML e il CSS completi.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER
NAVIGATION
<div id="container">
<div id="sidebar">
SIDEBAR
<div id="content">
CONTENT
</div> 
<div id="footer">
FOOTER
</body>
</html>

/*Layout a due colonne con sidebar sinistra con flexbox*/
body {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
width: 100%;
}
#header {
height: 100px;
margin: 0;
padding: 10px;

14

color: #FFF;
}
#navigation {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}
#container {

background-color: #FF0000;
}
#sidebar {
width: 180px;
height: 350px;
margin: 0;
padding: 10px;

color: #000;
}
#content {
height: 350px;
margin: 0;
padding: 10px;

15

color: #FFF;
}
#footer {
height: 50px;
margin: 0;
padding: 10px;

color: #FFF;
}

Nel caso si desideri spostare la sidebar a destra, le modifiche da apportare riguardano
solo la propriet box-ordinal-group, che dovr essere posta a 1 per content e a 2 per
sidebar.

/*Layout a due colonne con sidebar destra con flexbox*/
...........................................

#sidebar {
width: 180px;
height: 350px;
margin: 0;
padding: 10px;

color: #000;
}
#content {
height: 350px;
margin: 0;
padding: 10px;

16

color: #FFF;
}

...........................................

Quest'opera stata rilasciata con licenza Creative Commons Attribuzione - Non commerciale - Condividi allo
stesso modo 3.0 Italia. Per leggere una copia della licenza visita il sito web
http://creativecommons.org/licenses/by-nc-sa/3.0/it/ o spedisci una lettera a Creative Commons, 171
Second Street, Suite 300, San Francisco, California, 94105, USA.

CSS Layout A 2 Colonne

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Layout A 2 Colonne

Uploaded by

Copyright:

Available Formats

Autore: Bocchi Cinzia

Ultimo aggiornamento: 20/03/2014

You might also like