CSS:Evitare che un DIV con larghezza impostata al 100% sfori dal proprio contenitore

CSS:Evitare che un DIV con larghezza impostata al 100% sfori dal proprio contenitore

Il tuo DIV con larghezza al 100% sfora dal suo contenitore? Risolvilo con il CSS!

Un po come quando cercate di riempire il vostro bicchiere di birra sino all'orlo senza riuscire a non farla fuoriuscire, il vostro DIV con largezza al 100% con riesce ad adattarsi al suo contenitore e anche lui come la birra fuoriesce?

Certamente il problema della birra è il più grave dei due, non vorremo mai sprecarne, ma oggi cercheremo di risolvere il secondo problema facendo uso della proprietà box-sizing.

Attraverso la proprietà CSS box-sizing è possibile, infatti, far si che il notro div con largezza al 100% prenda come riferimento il suo div contenitore.
Ecco allora la risposta a tutti i nostri problemi!
Per forzare i contenuti ad utilizzare il box model che vogliamo dobbiamo servirci della proprietà box-sizing in questo modo:

.contenuto{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}

In questo caso, il nostro div con classe contenuto adatterà la sua larghezza in base al suo div contenitore.

loader