/*Stili per eliminare margini e padding impostati su tutti i browser di default*/ html,body{margin:0; padding: 0;} /*stili per i caratteri*/ body{ font-family: arial,sans-serif;font-size: 16px;text-align: center;/*centra in IE 5.x */} div#container{ margin: 0 auto;/*centra negli altri browsers*/ } /*stili per le dimensioni delle aree in un layout fisso*/ div#container{ width: 993px; text-align: left;} div#header{ } div#navigation{ width: 150px; } div#content{ } div#footer{ } /*stili per il posizionamento assoluto*/ div#container{ position:relative; } /* consente il posizionamento al suo interno di altri componenti*/ div#header{ } div#navigation{ position:absolute; top: 200px; left: 10px; } div#content{ margin:/*top*/20px /*dx*/20px /*down*/20px /*top*/150px; } /*distanzia il content dai bordi del container*/ div#footer{ } stili per le altezze delle aree div#container{ /*height:500px;*/ } div#header{ height:182px; } div#navigation{ height:300px; } div#content{ /*height:400px;*/ } div#footer{ height:45px; } div#extra{visibility:hidden} /*stili per la distanziazione interna degli oggetti dal bordo div#content{ padding: 1em 1em 5em; } div#footer{ padding: 0.5em 0; } */ /*stili per il layout fisso con posizionamenti assoluti html,body{margin: 0;padding:0} body{font-family: arial,sans-serif;font-size: 76%;text-align: center} div#container{background-color: #ffd;position:relative; width: 760px;margin: 0 auto;text-align: left; border-left: 2px solid #36c;border-right: 2px solid #36c;background-color: #9cf; background: url(rightcol.jpg) repeat-y top right} /*stili generici, su header e footer* div#header{text-align: center;background-color:#36C;color: #ff0} h1,h2{margin: 0;padding:0} h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif} h2{color: #999;font-size: 1.5em} div#footer a{color: #fff;font-weight: bold;text-decoration: underline} /*stili specifici per il layout div#navigation{position:absolute;top: 80px;left: 0;width: 180px;background-color:#9cf} div#content{margin-left: 200px;padding: 1em; background-color: #dec} div#footer{text-align:center; padding: 0.5em; background-color: #69c; color: #000} /*stili per la navigazione* div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;} div#navigation li{margin: 0;padding: 0} div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none} div#navigation a:hover{color: #033;text-decoration: underline} div#navigation a#activelink{color: #033;text-decoration: none} div#extra{visibility:hidden} div#navigation *{display:block;}/*tutti gli elementi a capo uno dall'altro*/ /* Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni rispetto all'analogo con i float. Questi sono l'accessibilità e delle migliori chanche di indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio: non consente di avere la colonna di navigazione più lunga della colonna dei contenuti se vogliamo avere un footer a larghezza piena. Se siamo disposti ad accettare questa condizione, a parer mio il layout con posizionamenti assoluti è da preferire. Anche in questo caso le sezioni fondamentali sono quattro: header, navigazione, contenuti e footer. Cambia il codice HTML, in quanto la navigazione deve essere preceduta dai contenuti. Ecco quindi l'HTML elementare di questo layout:

Ora vediamo quali sono le regole CSS minimali per realizzare un layout a due colonne con i posizionamenti assoluti: div#container{ position: relative; } div#content{ margin-right: 200px; } div#navigation{ position: absolute; top: 80px; /*l' altezza dell' header*/ /* right: 0; width: 180px; /*un po' di meno per evitare l' uso del padding*/ /* } In sostanza il meccanismo è questo: il container viene dichiarato position:relative per consentire il posizionamento al suo interno. Il div dei contenuti lascia spazio sulla destra per la navigazione e allo stesso tempo, implicitamente, permette al footer di disporsi a fondo pagina riprendendosi il flusso degli elementi; infine la navigazione è posizionata assolutamente. Allo stesso modo con cui abbiamo realizzato il layout a due colonne cromatiche con i float, possiamo ottenere il layout a due colonne cromatiche con il colore e con l' immagine di background. */