Continuando il discorso intrapreso nella lezione precedente in questa lezione affronteremo l'uso combinato di altre due proprietà importantissime per realizzare una struttura di pagina bella e funzionale il float ed il clear.

Supponiamo di dover o voler realizzare un menù situato nella parte destra della pagina al fianco di una zona dove saranno visualizzati i contenuti del menù, sotto un'intestazione,e sopra un piè di pagina. In parole povere una situazione simile all'immagine sottostante.


Per fare questo iniziamo con il realizzare un div #Menu adoperando la tecnica descritta nella lezione pannello Stili CSS e posizioniamolo sotto il #Contenuto. Selezioniamo il #Contenuto ed attribuiamogli la proprietà float left usando il metodo descritto nella lezione precedente.


In questo modo abbiamo detto al computer di posizionare quello che viene subito dopo il div #Contenuto alla sua destra. Infatti se noi diamo una larghezza minore di quella del div #Intestazione e diamo la sua stessa altezza al div #Menu avremo una visualizzazione simile


che risulta essere un vero obrobrio in quanto il div #Finale appare nel mezzo di div #Contenuto e di div #Menu

Per ovviare a questa insulsa visualizzazione selezioniamo il div #Finale ed aggiungiamogli la proprietà clear both adoperando la tecnica descritta nella lezione pannello Stili CSS

Avremo così finalmente una struttura decente


La proprietà float è molto utile anche per la visualizzazione del testo ad esempio al fianco di un immagine.

COMMENTI