- Learn
- Guida Layout dei siti con i CSS
- Layout a tre colonne con float
Layout a tre colonne con float
In questa lezione vedremo come realizzare un layout a tre colonne con i float. Le due colonne, come abbiamo detto, devono precedere il contenuto nel codice HTML, vediamo il codice minimale:
<body>
<div id=”container”>
<div id=”header”></div>
<div id=”navigation”></div>
<div id=”extra”></div>
<div id=”content”></div>
<div id=”footer”></div>
</div>
</body>
Anche in questo caso, vediamo il CSS di base. Per quasi tutti gli esempi che seguiranno, le due colonne saranno larghe 170 pixel totali (incluso il padding). Ci avverremo, quindi, del box model hack semplificato:
div#navigation{
float:left;
/* Inizia il Simplified Box Model Hack */
width:160px; /* Dimensioni per Opera 5 */
width:170px; /* Dimensioni per Explorer 5.x */
width:160px; /* Dimensioni per browser standard
compliant */
padding:1em 0 0 10px}
div#extra{
float:right;
width: 160px;
width:170px;
width:160px;
padding:1em 5px}
div#content{
margin:0 170px;
padding:1em 10px}
div#footer{clear:both}
La colonna dei contenuti principali verrà distanziata da quelle laterali grazie all’uso dei margini laterali di misura uguale alla larghezza totale delle colonne laterali. In pratica, se la colonna laterale misura 170px, imposterò un margine sinistro o destro su quella centrale uguale a 170px.
Infine, il footer avrà un clear: both di modo da impedire che le colonne secondarie vadano a coprirlo (nel caso in cui queste ultime siamo più lunghe della colonna centrale).
Aggiungiamo un po’ di contenuto e stile alle varie sezioni e questo è il risultato. Ecco invece come rende lo stesso layout applicato però a una pagina HTML con la colonna di navigazione più lunga oppure in cui la sezione extra è la più lunga.
Scarica il file zip di questa lezione
Se vuoi aggiornamenti su Layout a tre colonne con float inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Applicare l’effetto Acqua con Photoshop – parte 2
Dopo aver scelto le immagini di schizzi d’acqua, il passaggio successivo è quello di utilizzarle per ricoprire tutti i bordi […]