Programmazione Web » Css » Evitare la sovrapposizione dei div: la proprietą clear
Evitare la sovrapposizione dei div: la proprietą clear
Difficoltà:
Scritto da Alberto Giuliani
Sito Web: http://www.agwebsolutions.it 
Questo tutorial è stato letto 1320 volte
In questo tutorial vedremo come risolvere il problema dell'accavallamento dei div in una struttura a float con i CSS.
La proprietà Float permette di realizzare un layout a tabelle senza l'utilizzo del tag table.
Supponiamo di avere una pagina con questo codice:
<body>
<div id="#header">
Qui l'header</div>
<div id="sinistra" style="float:left">Qui il testo</div>
<div id="destra" style="float:right">Qui il testo</div>
<div id="footer">Qui il testo del footer.</div>
</body>
La nostra pagina presenta quindi un header superiore, una parte centrale divisa in sinistra e destra e un footer inferiore. La struttura presentata è molto sommaria, poichè ci servirà solo per capire il funzionamento della proprietà clear .
Ora, i DIV #sinistra e #destra hanno una posizione particolare stabilita da FLOAT:LEFT. Essi sono "isolati" rispetto agli altri DIV, anche se non è un termine appropriato, poichè mantengono ancora relazioni con essi, a contrario dei div con POSITION:ABSOLUTE. Raggiunta una certa lunghezza, i div in questione tendono ad espandersi verticalmente, sovrapponendosi al DIV #footer. Come porvi rimedio?
Semplicemente modificando il TAG del DIV #footer in questo modo:
<div id="footer" style="clear:left">Qui il testo del footer.</div>
Abbiamo aggiunto quindi clear:left che fa sì che il div si appropri di una striscia di pagina, impedendo di essere nascosto da altri div.
Ed ecco risolto uno tra i problemi principali di chi si avventura con layout table-less, ossia scritti in CSS e XHTML.
Aggiungi questo tutorial ai preferiti
