Description

This property sets the content width of a block or a replaced element. This width does not include padding, borders, or margins—see The CSS Box Model.

If the contents of a block require more horizontal space than the width you assign, their behavior is defined by the overflow property.

Value

The property takes a CSS length (px, pt, em, and so on), a percentage, or the keyword auto. Negative length values are illegal.

Percentage values refer to the width of the element’s containing block. If the containing block’s width depends on this element’s width, the resulting layout is undefined in CSS2.1.

The special auto value allows the browser to calculate the content width automatically on the basis of other factors.

For absolutely positioned elements, for example, the content width may be calculated on the basis of the left and right property values, or on the left and right margins, borders, and padding applied to the element. Note that Internet Explorer versions up to and including 6 don’t correctly apply the properties left and right when they’re used at the same time. See the section on position for more details.

If no hard constraints are imposed by other properties, the element is allowed to assume its natural content width, based on the width of the horizontal space available. For static or (relatively positioned) elements, this means that an element whose width is set to auto will expand to fill the parent without our needing to set a specific width such as width:100%. This is useful when padding and borders need to be set on the same element as it avoids any box model problems—see the box model.

Compatibility

Internet Explorer for Windows versions up to and including 5.5 (and up to and including version 7 in quirks mode) incorrectly include padding, borders, and margins in the content width. This is known as the box model bug (see the box model).

Internet Explorer for Windows versions up to and including 6 (and up to and including version 7 in quirks mode) in some respects incorrectly treat width as though it were min-width, by extending the content width of a block if its content cannot fit within the specified space. Such a scenario would arise if an image was bigger than the available content area, or if unbroken text content couldn’t wrap, and pushed the boundaries of an element wide enough to fit. This bug may push other elements on the page out of place, or cause floated elements to drop down. The correct behavior would let the content overflow without affecting the width of the element, and would leave other elements unaffected.

However, this stretching of the width will only occur in the types of cases mentioned above—it won’t be caused by the addition of content that will automatically wrap within the element, such as normal text. In simple terms, the parent element will only stretch when the element it holds has a specific width that’s greater than that of the parent.

Internet Explorer for Windows versions up to and including 6 don’t support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together. They will use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.