Ecco una serie di esempi che mostrano il funzionamento di questa fondamentale proprietà che esprime la larghezza dell'area del contenuto di un elemento.
Caso semplice e standard.
Codice:
#div1 {
width: 200px;
background: Silver;
}
La dimensione del div qui sotto dovrebbe essere uguale alla metà della finestra del browser.
Codice:
#div2 {
width: 50%;
background: Silver;
}
Se usiamo il valore auto la larghezza sarà automaticamente equivalente alla larghezza dell'elemento contenitore. In questo caso il div si estenderà orizzontalmente per tutta l'ampiezza della finestra. Noterete dei margini a sinistra e destra, ma sono quelli "naturali" che ogni browser inserisce.
Codice:
#div3 {
background: Silver;
width: auto;
}
Qui mostriamo il concetto di larghezza relativa espressa in percentuale. Il div grigio è largo 600px. Il secondo ha la proprietà width impostata al 50%. Il risultato è che esso sarà di 300px.
Codice:
#div4 {
background: Silver;
width: 600px;
}
#div5 {
background: Teal;
width: 50%;
}
L'esempio mostra chiaramente come width e larghezza effettiva possano coincidere se non si impostano bordi, margini e padding.
Il primo div (#div11) presenta il codice seguente:
#div11 {
background: silver;
width: 300px;
}
La sua larghezza effettiva sarà di 300px.
Il secondo (#div12) ha invece queste impostazioni:
#div12 {
background: silver;
width: 200px;
border: 30px solid black;
padding: 20px;
}
La sua larghezza, secondo quanto abbiamo imparato, è data da questa somma:
30+20+200+20+30= 300px
Ancora una dimostrazione di come auto imposti la larghezza sulla base di quella dell'elemento contenitore.
Codice:
#div6 {
background: teal;
width: auto;
}
#div4 {
background: Silver;
width: 600px;
}
Per finire. Ecco la dimostrazione che width esprime sempre l'area del contenuto. Il div verde ha widht = auto, quello grigio width = 600px; esattamente come prima. Ma ora il div grigio ha anche un padding di 30px. La sua estensione complessiva è maggiore (660px), ma l'area del contenuto è sempre di 600px.
Codice:
#div7 {
background: Silver;
width: 600px;
padding: 30px;
}
#div8 {
background: Teal;
width: auto;
}