width

Last updated on: March 14, 2013

The width property in CSS specifies the width of the elements content¹ area. This "content" area is the portion inside the padding, border, and margin of an element (the box model).

.wrap {
  width: 80%;
}

Elements that have a class name of .wrap will be 80% as wide as their parent element. The accepted values are any of the length values.

Width can be overridden by its closely correleated properties min-width and max-width.

.wrapperA {
  width: 100%;
  max-width: 320px; /* Will be AT MOST 320px wide */
}
.wrapperB {
  width: 100%;
  min-width: 20em; /* Will be AT LEAST 20em wide */
}

Check out this Pen!

Digging Deeper

When using percentage for width, authors must be aware that the percentage is based on the elements parent, or in other words, the width of the containing block. If your parent is set at 480px - as demonstrated by our demo - then the percentage is based on that value. So in our case 50% of 480px leaves us with 240px as a computed pixel value.

Note that width applies to all elements except non-replaced or inline elements, table rows and row groups (i.e. thead, tfoot and tbody).

If authors choose rem units for width, be mindful that this unit of measurement is not supported in versions of IE 8 and below.

For absolutely positioned elements whose containing block is based on a block container element, the percentage is calculated with respect to the width of the padding box of that element.

Width is usable today as an animatable property.

Check out this Pen!

Other Resources

• height
• W3C Spec
• MDN Docs
• Caniuse.com

Browser Support for width

Browser Support for min-width and max-width