Width

width Support Key: [*CSS1\|CSS2\|CSS2.1] [IE4\|N4\|O3.5*\|S1]	Other Dimension Properties
	min-width max-width line-height	height min-height max-height
= Index DOT Css by Brian Wilson =

Main Index | Property Index | CSS Support History | Browser History

Quick Statistics
Default Value:		auto
Applicable Elements:		All except inline non-replaced elements, table rows, and table row groups
Inherit From Parent:		No
Applicable Media:		Visual
HTML Equivalent:		WIDTH attribute used in tables and replaced elements.
Official Docs:		CSS1: Sect. 5.5.23 CSS2: Sect. 10.2, CSS2.1: Sect 10.2

What is it?: This property specifies the width of an element's rendering box for block-level and replaced elements. Negative values are not allowed.

In addition to the 'width' property, two other properties - 'min-width' and 'max-width' - place constraints on the allowed value for an element's rendering box width. The 'width' value is first computed without consideration for these other two properties. If the computed value is greater than the 'max-width' value or less than the 'min-width' value, the width is re-calculated using the 'max-width' or 'min-width' as the new 'width' value.

Allowed Values
inherit
[CSS2|CSS2.1] [N6|O4|S1]: Type: Explicit; Description:
Explicitly sets the value of this property to that of the parent.
auto
[CSS1|CSS2|CSS2.1] [IE4|N4|O3.5|S1]: Type: Explicit; Description:
The width is determinant on the values of other properties.
[length]
[CSS1|CSS2|CSS2.1] [IE4|N4|O3.5|S1]: Type: Explicit; Description:
Refers to an absolute measurement for the computed element box width. Negative values are not allowed.
[percentage]
[CSS1|CSS2|CSS2.1] [IE4|N4|O3.5|S1]: Type: Calculated; Description:
Refers to a percentage of the width of the containing element block.

Example: Ext/Doc: img.class1 { height: 75px; width: 75px }; In-Line: <img STYLE="height: 75px; width: 75px" SRC="image.jpg">

Browser Peculiarities

Internet Explorer

4.0:
- This property does not apply to inline elements, input type=checkbox|radio elements, list structures (ol, ul, dl) and list sub-items (li, dt, dd.)
- This property is supported for the DIV element, but not for other block structures.
4.0+:
- If this property is applied to table structures, it is only applied if the specified width is greater than sum of the total table cell minimums needed for each cell to render correctly. Any extra width is distributed evenly in the table columns.
5.0:
- This property now applies to inline elements, list structures (ol, ul, dl) and list sub-items (li, dt, dd.)
- This property can now be applied to all block element structures.
- This property now applies to form checkbox and radio buttons (input type=checkbox|password|radio|text.) These controls have an intrinsic width, so the extra width is added as padding around the field.
- Applying this property to an OL list structure turns the markers into bullets.
- Applying this property to an OL list item resets the counter.
- Applying this property to an UL/OL list structure makes the 'list-style-type' into "bullet", and the 'list-style-position' is set to "inside", not "outside."
Netscape

4.x:
- This property does not apply to form field or replaced object (eg: IMG element) dimensions.
- Applying this property to DL structures applies the specified width to each DT and DD sub element.
- Applying this property to DT/DD elements has no effect.
- Applying this property to inline elements and replaced elements (such as images) often has odd effects. The usual behavior is to begin rendering the inline element at the start of the current line, overlapping previous content. In the rare cases where this does not happen (for reasons related to the element's width), a linefeed occurs before the element.
- This property DOES appear to be supported for HR elements.
Opera

3.5:
- This property has no effect on inline elements, form fields or tables.
- If only one dimension is given for an image, the other dimension is calculated such that the image has the same height/width proportions as the original image.