CREARE SITI WEB in HTML e CSS > Affiancare i blocchi (colonne)
I blocchi così divisi si dispongono in senso verticale, uno sotto l'altro.
Per disporre i blocchi in senso orizzontale, devi applicare la proprietà.
float
Impostando su un blocco la dichiarazione:
float: left;
il blocco successivo si affiancherà a destra se lo spazio della finestra del browser lo consente.
| codice HTML |
|
... <style type="text/css"> div { background-color: yellow; width: 150px; border: 5px solid gray ; margin: 5px; float: left; } </style> </head> <body> <div>Zona numero uno</div> <div>Zona numero due</div> <div>Zona numero tre - In questa zona vengono inserite più parole, ... </div> <div>Zona numero quattro</div> </body> ... |
| risultato pagina web |
|
Se ridimensioni la larghezza della finestra del browser, i blocchi fluttueranno, disponendosi nella parte sottostante.