This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

max-width

Summary

Sets the maximum width for an element. It limits the width property to be larger than the value specified in max-width.

Overview table

Initial value
none
Applies to
all elements but non-replaced inline elements, tables, inline tables, table cells, table columns, and column groups
Inherited
No
Media
visual
Computed value
the percentage as specified or the absolute length or ‘none’
Animatable
Yes
CSS Object Model Property
max-width
Percentages
refer to width of containing block

Syntax

  • max-width: calc()
  • max-width: fill-available
  • max-width: fit-content
  • max-width: inherit
  • max-width: length
  • max-width: max-content
  • max-width: min-content
  • max-width: none
  • max-width: percentage

Values

length
Specifies a fixed width. Negative values are not allowed. See length for possible units.
percentage
A <percentage> relative to the width of the containing block. If the containing block has no width explicitly set then is is treated as none. Negative values are not allowed.
calc()
See css calc function for mode details.
inherit
Takes the same specified value as the property for the element’s parent.
none
Default. Clears the max-width value. The width property can have any value.
max-content
The narrowest space a box could take while fitting around its contents if none of the soft wrap opportunities within the box were taken.(Space/Punctuation in text are examples of a soft-wrap opportunity). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
min-content
The narrowest measure a box could take that doesn’t lead to inline-dimension overflow that could be avoided by choosing a larger measure. Roughly, the measure that would fit around its contents if all soft wrap opportunities within the box were taken. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
fill-available
Fill the entire available space of from the containing block (Width minus vertical margin, border and padding of the containing block). Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.
fit-content
If the total available space is finite, equals to min(max-content, max(min-content, fill-available)). Otherwise, equal to the max-content measure. Requires CSS Intrinsic & Extrinsic Sizing Module support in browsers.

Examples

Use max-width with any CSS selector to apply it.

/* Restrict all div elements to a max-width of 100px */
div { max-width: 100px }

Constrain the width of a div element using min-width and max-width attributes.

<style>
/* Width set to 50% */
.width {
    width:50%;
    background:#eee;
}

/* min-width set to 600px */
.minwidth {
    width: 50%;
    min-width: 600px;
    background: lightblue;
}

/* max-width set to 600px */
.maxwidth {
    width: 50%;
    max-width: 200px;
    background: lightgreen
}

/* Content with border and padding */
.content {
    border:1px solid #c00;
    padding:5px;
}
</style>

<h3>Resize the window to grow and shrink the div from max to min width.</h3>
<div class="width">
        <p class="content">This div also has a width of 50%. <br/><br/>
         Note that the div height increases to accommodate the flow of text.</p>
</div>
<div class="minwidth">
    <p class="content">This div also has a width of 50%.<br /><br /> It also has a min-width of 600px.</p>
</div>
<div class="maxwidth">
    <p class="content">This div also has a width of 50%.<br /><br /> It also has a max-width of 200px.</p>
</div>

View live example

Usage

 CSS max width is well supported across most browsers. A few things to consider while usage:
  • min-width overrides max-width. If min-width supplied is greater than max-width, max-width does not have an impact.
  • max-content, min-content, fit-content, and fill-available are in W3C draft stage and not supported across all browsers.
  • Support for calc is better across browsers. Vendor prefixes may be needed.

Notes

Remarks

The min-width/max-width attributes apply to floating and absolutely positioned block and inline-block elements, as well as some intrinsic controls. They do not apply to non-replaced inline elements, such as table rows and row/column groups. (A “replaced” element has intrinsic dimensions, such as an img or textArea.) This property is enabled only under the strict !DOCTYPE.

Related specifications

CSS 2.1 (Section 10.7)
W3C Recommendation
CSS Intrinsic & Extrinsic Sizing Module Level 3
Working Draft

See also

Related articles

CSS Layout

Box Model

Related pages

Attributions