Iport
Online Layout Designer

Template a 2 colonne

Il più classico dei layout, il 2 colonne è molto utilizzato solitamente posizionando il logo e la barra di navigazione sulla prima colonna, generalmente più stretta, di quella invece dedicata ai contenuti visualizzata nella parte destra dello schermo.

La prima riflessione da fare è se vogliamo avere un layout fluido o meno. In questo tutorial prenderemo in considerazione ovviamente tutti i casi.

Codice della pagina

Il layout descritto si limita a disegnare e posizionare 3 Div, il primo, quello principale che contentiene gli altri due Div che costitueranno le colonne della pagina.

Possiamo quindi partire dal codice :

<div class="main">
<div class="colsx">Colonna 1</div>
<div class="coldx">Colonna 2</div>
</div>

Layout a 2 colonne fisso

.main { width:768px; margin: auto; }
.colsx { float: left; width: 256px; height: 640px; background: #eee;}
.coldx { margin-left: 256px; height: 640px; background: #ddd;}

Layout a 2 colonne fluido

.main { margin: 0px; }
.colsx { float: left; width: 20%; height: 640px; background: #eee;}
.coldx { margin-left: 20%; height: 640px; background: #ddd;}

Approfondimenti sullo stile

Per riuscire a comprendere meglio i vari comandi Css, vi descriviamo qui di seguito uno a uno tutti quelli che costrituiscono il layout.

Width : Larghezza del Div, si possono assegnare sia valori in pixel (px) sia in percentuale (%). Questo comando viene utilizzato per ridimensionare il Div con classe main per ridimensionare il layout ad una larghezza fissa. Nel caso invece del Div con class colsx che nell'esempio a larghezza fissa viene assegnato un valore in pixel e nel caso del layout fluido in percentuale.

Height : Altezza del Div, nel nostro esempio vengono impostate le altezze delle due colonne anche se per siti con molti contenuti è sconsigliabile. Normalmente vengono assegnate altezze in pixel e percentuale a quei Div che devono contenere immagini, quando invece il contenuto è testuale bisogna prevedere l'occupazione del testo provando ad ingrandirlo dal menù del programma di navigazione.

Margin : Margine del Div, è lo spazio esterno al Div, si possono impostare anche singolarmente i vari lati del Div. Assegnando invece il valore auto si ha il risultato di centrare il Div direttamente come nel caso del Div con classe main nell'esempio del layout fisso.

Float : posiziona affianco il prossimo blocco, questo comando è fondamentale per poter posizionare i vari Div nella pagina. Quando ad un Div si assegna il comando float, bisogna sincerarsi di assegnare anche la larghezza.