Nell’organizzazione del layout di una pagina web, per avere ogni cosa al suo posto, è necessario ricorrere a tutta una serie di accorgimenti tecnici e “trucchi”. Anni fa, agli albori del 
webdesign, si usava “ingabbiare il tutto” sfruttando le tabelle. Il risultato ottenuto era abbastanza stabile sui vari browser, ma poteva originare non pochi problemi di accessibilità. La diffusione ed evoluzione dei CSS, ha poi reso possibile il difficile connubio tra eleganza e accessibilità, aprendo a quelle tecniche “tableless” oramai imprescindibili per chi realizza siti web.
A proposito delle straordinarie potenzialità dei CSS, oggi parleremo della proprietà “float”, che consente di posizionare ed affiancare i nostri div e paragrafi, in maniera anche più semplice che per come facevamo con le tabelle.
Il piccolo esempio che segue la dice lunga su come si possa ottenere un bel risultato in poco tempo grazie ai CSS. Piuttosto che avviare una lunga e accademica dissertazione a riguardo, vi presento la via pratica più veloce per allineare tre contenuti su tre colonne, utilizzando i div e una sola regola css (segue una variante con tre regole).
Partiamo dal codice HTML disponendo i tre div, uno di seguito all’altro ed assegnando a ciascuno la classe che andremo a creare, che nel mio caso ho chiamato “affiancato” (fantasioso, no?)
<div class=”affiancato”>contenuto del div di sinistra</div>
<div class=”affiancato”>contenuto del div di centro</div>
<div class=”affiancato”>contenuto del div di destra</div>
Ora è il momento dello stile. Per comodità e velocità incorporiamo lo stile nella pagina stessa. A tal proposito, incolliamo questo codice nell’header del sito (tra i tag <head></head>)
<style>
.affiancato{float:left;width:30%;}
</style>
Bene! Così facendo i nostri contenuti si disporranno su tre colonne.
Nel caso in cui fosse importante differenziare la formattazione dei tre contenuti, non dovremo far altro che “clonare” la pseudoclasse due volte e rinominarla, ottenendo così le regole per i tre distinti livelli, che in questo caso chiameremo, con grande sforzo di fantasia “sinistra”, “centro”e “destra”, successivamente imposteremo un diverso colore di sfondo per ciascun livello, come si vede del codice css di seguito.
.destra{ float:left; width:30%; background-color: red; }
.sinistra{ float:left; width:30%; background-color: green; }
.sinistra{ float:left; width:30%; background-color: fuchsia; }
Ovviamente sarà necessario che ciascun div richiami la propria classe. Ed allora avremo:
[/spoiler]
Non resta che personalizzare il tutto secondo le nostre necessità, sfruttando questa struttura come scheletro per delle inclusioni di files esterni o…vedete voi cosa fare…
Per oggi è tutto.
Alla prossima!
[…] nostra scelta per le colonne ricadrá sui box flottanti (ne avevamo parlato), quindi lo stile sará il […]