CSS: bozza di layout a 2 colonne, con larghezza fissa, usando i float

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×

I layout fissi sono creati specificando i valori di width in pixel. Tipicamente, il contenuto dell’intera pagina è inserito all’interno di un div (spesso chiamato “content”, o “wrapper”, o “container”) che può essere impostato con una specifica width in px.

Dopo aver deciso la width dell’elemento contenitore (spesso sarà di 960px – 1140px, ma ovviamente molto dipende dal design che si intende dare alla pagina e da quale schermo si intenda privilegiare, ad es.: tablet o schermi molto grandi.) si dovrà decidere dove andrà a posizionarsi l’intero layout: esso per default andrà a posizionarsi sul lato sinistro della finestra del browser, lasciando facilmente extra spazio sul lato destro. E’ possibile centrare il layout (suddividendo in tal modo lo spazio extra equamente tra i due lati) impostando ad auto i margini sinistro e destro del div contenitore – margin: 0 auto;.

Tutto il contenuto è racchiuso in un div #wrapper a cui viene dato una larghezza (in px) di 960px (molto comune, ma si può dare una larghezza diversa, ovviamente). Larghezze e margini vengono impostate in pixel, stando attenti a non eccedere la larghezza totatle che abbiamo impostato nel wrapper di 960px. A tal riguardo tieni a mente che se si aggiungono bordi e/o padding, questi andranno sommati alla width che già abbiamo ottenuto con width + margini.

Eventuali header e footer possono essere compresi (come in tal caso) nel wrapper oppure tenuti fuori da esso nel caso in cui volessimo una larghezza massima (che si estende per tutta la larghezza del browser) per essi.

layout-fisso-2colonne-float

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×