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

.wrap {
  width: 80%;

In the example above, 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, in addition to some keywords we'll cover later.

Width can be overridden by the 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 element's 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).

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!

Keyword Values

With some special keyword values, it is possible to define width (and/or height) according to the content of the element.


The min-content value is the smallest measure that would fit around its content if all soft wrap opportunities within the box were taken.

The best example for this kind of value is a properly written figure element:

  <img src="/images/kitten.jpg" alt="" />
  <figcaption>What a lovely kitten we got there in this image which is encapsulted in a figure element. How dear, look how long this caption is!</figcaption>

Once we have applied some basic styles to this markup, we get:

See the Pen qmFln by Chris Coyier (@chriscoyier) on CodePen.

If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior, but what if we wanted to center it? min-content allows us to center it:

See the Pen qoubH by Chris Coyier (@chriscoyier) on CodePen.

Because we've assigned min-content to the figure element, it takes the minimum width it can have when taking all soft wrap opportunities (like spaces between words) so that the content still fits in the box.


The max-content property refers to the narrowest measure a box could take while fitting around its content - if no soft wrap opportunities within the element were taken.

Check out what happens if we apply this to our simple kitten/figure demo:

See the Pen qzvgc by Chris Coyier (@chriscoyier) on CodePen.

Because the caption is very longer than the image is wide (it doesn't take any soft wrap opportunity, like the spaces between words), it means it has to display the caption on a single line, thus the figure is as wide as that line.


???. One of life's great mysteries.


The fit-content value is roughly equivalent to margin-left: auto and margin-right: auto in behaviour, except it works for unknown widths.

For instance, let's say we need to center an inline navigation across the page. Your best bet would be to apply text-align: center to the ul, and display: inline-block to the li. This would give you something like this:

See the Pen xJlzg by Chris Coyier (@chriscoyier) on CodePen.

However, the blue background (from the ul element) spreads across the entire document because the ul is a block-level element, which means its width is restricted only by its containing element. What if we want to have the blue background collapsing around the list items? fit-content to the rescue!

See the Pen uJFAb by Chris Coyier (@chriscoyier) on CodePen.

With fit-content and margin: 1em auto, this works like a charm and only the navigation has a colored background, not the whole document width.

If you're into this sort of thing, you'll be happy to know the formula to define the size of a fit-content length is:

fit-content = min(max-content, max(min-content, fill-available))

This is a pretty unused value, so if you come up with a great use-case, let us know!

Related Properties

Other Resources

Browser Support

For normal length values (e.g. px)

Chrome Safari Firefox Opera IE Android iOS
Yep Yep Yep Yep Yep Yep Yep

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 min-width and max-width

Chrome Safari Firefox Opera IE Android iOS
24+ 5.1+ 18+ 12.1+ 8+ 2.1+ 3.2+

For the keyword values

Chrome Firefox Internet Explorer Opera Safari iOS Android
min-content Yep Yep Nope 15+ 6.1 7 4.4
max-content Yep Yep Nope 15+ 6.1 7 4.4
fill-available Yep Kinda Nope 15+ 6.1 7 4.4
fit-content Yep Yep Nope 15+ 6.1 7 4.4
  • All values need to be prefixed by either -webkit- or -moz- (depending on the vendor)
  • Kinda for Firefox means it supports available rather than fill-available

Prefixing with Sass

The prefixing for these is a bit tricky, since only a few are required and they differ from browser to browser. Here is a Sass @mixin to help:

@mixin intrinsic($property, $value) {
  @if $value == fit-content or $value == min-content or $value == max-content {
    #{$property}: -webkit-#{$value};
    #{$property}: -moz-#{$value};
    #{$property}: $value;

  @else if $value == fill-available or $value == available {
    #{$property}: -webkit-fill-available;
    #{$property}: -moz-available;
    #{$property}: fill-available;

  @else {
    #{$property}: $value;

And you can use it like this:

.element {
  @include intrinsic(width, min-content);

Which generates this CSS:

.element {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;


  1. User Avatar
    Permalink to comment#

    The special keyword values don’t seem to work in IE10.

  2. User Avatar
    Permalink to comment#

    What do you mean by “the percentage is calculated with respect to the width of the padding box of that element”? Does that mean the padding is added to your percent width, or is it included?

  3. User Avatar
    Permalink to comment#

    The images inside the figures are broken Chris.

  4. User Avatar
    Permalink to comment#

    Your examples work with Google Chrome, but not with IE11 on Windows 7.

  5. User Avatar
    Peregrine Badger
    Permalink to comment#

    Thank you so much for this!

  6. User Avatar
    Permalink to comment#

    Mark & Kim; no IE support at all… yet

  7. User Avatar
    buse burak şentürk
    Permalink to comment#


  8. User Avatar
    Permalink to comment#

    How did I miss these new keyword values?

  9. User Avatar
    Permalink to comment#

    If we wanted that figure element to essentially be the size of that image, so the text wraps at the edges of the image. We could float it left or right, because float will exhibit that same kind of shrink-to-fit behavior(…)

    Could anyone possibly please explain how to achieve the same effect without setting up width for parental div (figure in this particular case)? I’ve been trying to float it left, or right, but couldn’t force paragraph to shrink to fit to the image size. If I’d set up the width for 200px for div, the problem solves itself, but I don’t need any floats. So, how can I achieve the same effect without specifying width for the figure, only with floats?

  10. User Avatar
    Permalink to comment#

    Maybe you were joking about wondering what the fill-available value does, because it’s kinda obvious, its name says it all.

    In case that you were not joking, what fill-available does is to give an element as much width (or height) as possible without overflowing its parent, that taking in consideration margin and padding (i.e. differently than 100% width).

    I love fill-available :)

    • User Avatar
      Permalink to comment#

      width: fill-available;
      width: -moz-fill-available;
      width: -webkit-fill-available;

    • User Avatar

      Hey Miguel! Can you give a real life example of “fill-available”? This sounds like something that could be extremely useful and I have just heard of it now!!

  11. User Avatar
    Charles Robertson
    Permalink to comment#

    Can someone explain the difference between




    This is another one of life’s great mysteries:)

  12. User Avatar
    Permalink to comment#

    you safe my day thanks!

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.