Finora abbiamo visto i principali layout e le loro diverse varianti. Tutti
gli esempi hanno una formattazione e dei contenuti semplici per non appesantire
troppo i fogli di stile, e soprattutto non distogliere l'attenzione dallo scopo
principale di questa guida: l'impaginazione. Non potevo però trascurare una sezione
dedicata al "micro-layout" cioè all'impaginazione dei contenuti centrali di una
pagina web. Vedremo brevemente come gestire immagini, titoli e paragrafi, ma allo
stesso modo si può procedere per qualsiasi elemento.
Float e clear
Prima di addentrarci in esempi pratici, è necessaria una brevissima introduzione
sulle due proprietà fondamentali che useremo in questa parte della guida.
La proprietà float (vedi l'esposizione e gli esempi dalla Guida
ai CSS di HTML.it) rende un elemento "fluttuante" a destra o a sinistra (right
o left) del suo contenitore. Gli elementi adiacenti vengono affiancati
sul suo lato libero e continuano disponendosi sotto. Gli elementi float, a differenza
degli elementi posizionati, non vengono rimossi dal flusso della pagina, ma solo
traslati.
La proprietà clear consente di impedire ad un elemento di avere
elementi float su uno o entrambi i lati. I possibili valori sono right,
left o both. La proprietà clear è spesso molto utile per controllare
la disposizione degli elementi adiacenti ad elementi float. Il suo uso, spesso
necessario in un layout che usa float, può purtroppo avere effetti non desiderati.
Per esempio, su un layout a tre colonne con il float, un clear:both
applicato ad un qualsiasi elemento nella colonna centrale fa sì che questo
si disponga verticalmente al di sotto delle due colonne laterali. Spesso, ma non
sempre, si può ricorrere a soluzioni che non usano il clear: in caso contrario,
e per avere meno limiti sull'impaginazione dei contenuti, il mio consiglio è di
usare layout con posizionamenti assoluti per layout a tre colonne se prevediamo
di usare la proprietà clear sulla colonna centrale. È anche ipotizzabile
un layout a tre colonne combinato, in cui la colonna extra è float e quella di
navigazione è posizionata assolutamente. Questo avrebbe due vantaggi significativi:
nessun vincolo di lunghezza tra la colonna centrale e quella extra e la possibilità
di usare il clear da un lato sulla colonna centrale.
Per i layout a due colonne il discorso è un po' più semplice. Generalmente
gli elementi come le immagini nella sezione dei contenuti vengono resi float a
sinistra. Definire la colonna di navigazione fluttuante a destra ci consente di
usare il clear:left per la sezione principale senza avere interferenze di layout
con la colonna di navigazione.