CSS  »  Articoli  »  CSS Template e layout 

La versione a tre colonne

Vediamo subito l'esempio. Una volta capito il meccanismo dei margini negativi è facile estendere l'idea e ottenere un layout a tre colonne. Ovviamente ci sono aggiunte nell'HTML e nel CSS, ma il principio di base è comune. Ecco l'HTML:

<div id="container">
  <div id="container2">
    <div id="header">header</div>
    <div id="wrapper">
      <div id="nav">colonna di sinistra</div>
      <div id="content">contenuto</div>
    </div>
    <div id="sidebar">colonna di destra</div>
    <div id="footer">footer</div>
  </div>
</div>

Come si può notare, rispetto alla versione a due colonne ci sono due contenitori aggiuntivi: un div id="container2" che ha lo scopo di contenere una delle immagini per le false colonne e ovviamente il div id="nav" che rappresenta la colonna di sinistra. C'è da notare che questo div precede i contenuti e sono entrambi racchiusi dal wrapper.

Vediamo per prima cosa gli stili di pagina, sui due contenitori principali e sull'header:

html,body{margin:0;padding:0}
body{font:100.01% Arial,sans-serif}
p{margin: 0 0 1em;line-height:1.4}
div#container{width: 100%;background: url(col2.jpg) repeat-y left}
div#container2{background: url(col.jpg) repeat-y right}
div#header{background: #555B65;color: #FFF}
div#header h1{margin:0 0 20px;padding: 10px;font-size: 200%}

Ora la parte centrale del CSS. Anche in questo caso il wrapper è reso float a sinistra, assume una larghezza pari al 100% della finestra del browser ed è traslato verso sinistra di 200px grazie ai margini negativi. Tale valore è proprio la larghezza dell'area dedicata alla colonna di destra, che verrà resa float:

div#wrapper{float: left;width: 100%;margin-left: -200px}
div#sidebar{float: right;width: 180px;
    margin-right: 10px;display: inline;font-size: 80%}

Ci restano da sistemare la navigazione di sinistra e i contenuti. Il div id="nav" verrà reso float a sinistra, avendo cura di attribuirgli un margine pari almeno alla traslazione orizzontale del wrapper. Avrà quindi un margine sinistro di 210 px, sarà largo 180px e avrà un margine destro di 10px. Come nell'esempio a due colonne e per la colonna di destra, la dichiarazione display:inline viene usata per sistemare il bug di IE che raddoppia i margini.

div#nav{float: left;width: 180px;display: inline;
    margin:0 10px 0 210px;font-size: 80%}

Arriviamo ai contenuti: questi subiscono la traslazione di 200px della pagina e la presenza della colonna di sinistra, larga 200px. Aggiungiamo un margine sinistro di 10px per distanziarlo dalla navigazione, e capiremo che per avere i contenuti al loro posto, e far si che questi restano distanti anche quando termina la colonna di sinistra, sono necessari 410px di margine sinistro:

div#content{margin: 0 10px 0 410px;
    height:auto !important;height: 1%}

Da notare che le due dichiarazioni sull'altezza non sono indispensabili, e servono solo per sistemare un noto bug di IE, ovvero il 3 pixel jog (cfr. articolo:«3 pixel jog»). Infine la regola sul footer:

div#footer{clear: both;padding: 3px 10px;background: #959FB1}

Il layout a tre colonne è così pronto: anche in questo caso la resa è stata testata ed è perfetta su IE 5, 5.5 e 6, Opera, Mozilla e Safari.

Conclusioni

Abbiamo visto come poter realizzare layout a due e tre colonne con l'uso dei margini negativi, una tecnica che si rivela semplice e robusta una volta capita la sottile logica dell'implementazione. Per approfondimenti rimando a questo ottimo tutorial.

Codice ed esempi sono disponibili per il download. Alla prossima.

Altri articoli

Altre guide

Altre newsletter