max-width (CSS property)

Spec
Inherited Initial Version
No none CSS2
Browser support (more…)
IE5.5+ FF1+ SA2+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

max-width:
{ length | percentage | none | inherit }
;

Description

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

An element to which a max-width is applied will never be wider than the value specified even if the width property is set to be wider. There is an exception to this rule, however: if min-width is specified with a value greater than that of max-width, the container’s width will be the largest value, which in this case means that the min-width value will be the one that’s applied.

max-width is often used in conjunction with min-width to produce a width range for the element concerned.

Note: Combining max-width and width

Note that max-width and width shouldn’t be applied to the same element using the same unit, as one will override the other. If, for example, the width is set to 150px and the max-width is set to 60px, the actual width of the element will be 60px, and the width declaration will become redundant.

The following style rule shows how conflicts are resolved where an element has been given both a width and a max-width using the same unit (pixels in this case):

.example {
  max-width: 60px;
  width: 150px;
}

In the above example, the width of the element will be fixed at 60px.

However, it’s acceptable to set max-width and width when the values are different units (although it may not be entirely useful, there are a few cases where it can be used to good effect).

This style rule assigns a max-width of 160px to images with the class "example", and also assigns a width of 50%:

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

The final width of the image in the above example will be the smallest value.

If you want an image to scale when the page width is small, so that the image doesn’t break out of its column, you could use the above example to ensure that the image’s size decreases once the available space is less than 160 pixels.

If the available space is greater than 160 pixels, the image will expand until it’s 160 pixels wide—but no further. This ensures that the image stays at a sensible size—or its correct aspect ratio—when space allows.

The min-width property can be used for the reverse of this scenario.

If the contents of a block require more horizontal space than is allowed by the limits that have been set, the behavior is defined by the overflow property.

Example

This style rule assigns a maximum width of 400 pixels and a minimum width of 100 pixels to paragraphs within the element with ID "example":

#example p {
  max-width: 400px;
  min-width: 100px;
}

Value

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

Percentage values refer to the width of the containing block. If the containing block’s width is negative, the used value is none.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Full Buggy Full Full Full Full Full Buggy Full Full Full Full Full Full Full

Safari’s support for this property, when applied to positioned elements, is limited to versions 2.0.2 or above.

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

Internet Explorer for Windows version 8 ignores a max-width value (other than none) that triggers content overflow when an element is floated and has an overflow value of scroll or auto (see James Hopkins for test case).

User-contributed notes

ID:
#6
Contributed:
by beninu
Date:
Sun, 20 Feb 2011 12:39:12 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Thank you for a nicely written and very beneficial article on the max-width property, and for all the useful information in the referece manuals on this page in general. I just have one suggestion that would make this article complete.

To all the people out there, that have to rely solely on the IE versions that either don't handle max-width or has a 'buggy' rendering of the property, or people that needs to take compatibility issues into consideration as their site is visited by many different users with different browser models and versions, it would be beneficial to mention the fact that this behaviour can also be achieved through CSS expressions, as in:

.example {
max-width: 400px;
// support for IE5.5, IE6, IE8
width: expression(this.width > 400 ? 400 : true);
}

Sidenote: This information is, of course, equally true when dealing with the max-height property, and as such should perhaps accompany the article on max-height as well (substituting the max-height property, of course).

Best regards

Beninu Andersen, DENMARK

ID:
#1
Contributed:
by Paul O'B
Date:
Thu, 15 Jul 2010 20:24:13 GMT

IE6 and under have no support for min-width/max-width min-height/max-height.

The reference should be amended.

Related Products