width

Table of contents

  1. 1. Summary
  2. 2. Syntax
    1. 2.1. Values
  3. 3. Examples
  4. 4. Notes
  5. 5. Specifications
  6. 6. Browser compatibility
    1. 6.1. See also
Page Notifications Off

« CSS « CSS Reference

Summary

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

 

  • Initial value : auto
  • Applies to: block level and replaced elements
  • Inherited : no
  • Percentages: refer to the width of the containing block
  • Media: visual
  • Computed value :  the percentage or auto as specified or the absolute length

Syntax

width:  <length> | <percentage> | auto | max-content | min-content | fit-content | available

Values

<length>
See <length> for possible units.
<percentage>
Specified as a <percentage> of containing block's width.
auto
The browser will calculate and select a width for the specified element.
max-content Experimental
New in Firefox 3 The intrinsic preferred width.
WebKit implements an earlier version of this value, under the name intrinsic. [1]
min-content Experimental
New in Firefox 3 The intrinsic minimum width.
available Experimental
New in Firefox 3 The containing block width minus horizontal margin, border and padding.
fit-content Experimental
New in Firefox 3 The larger of:
  • the intrinsic minimum width
  • the smaller of the intrinsic preferred width and the available width

Examples

View Live Examples

table { width: 100%; }

img   { width: 200px; }

form  { width: auto; }

p     { width: 40em; }

p { background: gold }

The Mozilla community produces a lot of great software.

p { background: lightgreen;
    width: intrinsic;         /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content;  /* Firefox/Gecko */
  }

The Mozilla community produces a lot of great software.

p { background: lightblue;  max-width: -moz-min-content; }

The Mozilla community produces a lot of great software.

Notes

The min-width and max-width properties override width .

Specifications

Browser compatibility

Browser Lowest Version intrinsic width intrinsic minimum width
Internet Explorer 4.0 --- --- --- ---
Firefox (Gecko) 1.0 (1.0) 3.0 (1.9) -moz-max-content
-moz-fit-content		 3.0 (1.9) -moz-min-content
Opera 3.5 --- --- --- ---
Safari (WebKit) 1.0 (85) 2.0 (412) ? intrinsic --- ---

Tags (2)

Edit tags

Attachments (0)

 

Attach file