Iport
Online Layout Designer

Layout Fluidi a 2 colonne con DIV e CSS

Il layout a due colonne viene normalmente utilizzato per quei siti con pochi contenuti, dove nella prima colonna viene posizionato verticalmente il menù di navigazione, e nella seconda colonna i contenuti testuali o fotografici della pagina.

Impostiamo lo stile del DIV principale, quello che dovrà contenere i due DIV delle colonne.
E' importante se si vuole ottenere la fluidità verticale, impostare il valore height: 100%; non solo sui blocchi, ma anche su html e body.

html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; font-size: 12px; }
.ESEMPIO2_MAIN { width: 80%; height: 100%; margin-right: auto; margin-left: auto; }

Definiamo ore le 2 colonne per quella di sinistra adotteremo nell'esempio un larghezza in percentuale, per quella di destra invece decidiamo per una soluzione che si adatti alla larghezza quindi in css definiremo le seguenti classi

.ESEMPIO_COLSX {  width: 20%; height: 100%; float: left; }
.ESEMPIO_COLDX {  margin-left: 20%; height: 100%; }

Indietro | Guarda l'esempio