The difference between width:auto and width:100%

Posted onSunday, 18 December 2011

Tagged withSyndicateCSS

When adapting a layout for different viewport widths (a.k.a. responsive design) or media (like print), it’s common to reset any float and width values on major layout blocks to linearise their display.

Unfloating a floated element is as simple as specifying float:none. Width doesn’t seem to be quite as straightforward – lately I’ve come across several cases where people use width:100% to undo explicitly specified widths when they should be using width:auto instead. So here’s a brief explanation of the difference.

The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block. If it has any horizontal padding or border, the widths of those do not add to the total width of the element.

View site: