max-width

  • Revision slug: CSS/max-width
  • Revision title: max-width
  • Revision id: 238821
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified for max-width.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }}
  • Applies to: block level and replaced elements, for <table> see {{ Anch("Browser compatibility") }} below
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer to the width of the containing block
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: the percentage as specified or the absolute length or none

Syntax

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

Values

none
The width has no maximum value.
length
See {{ Xref_csslength() }} for possible units.
percentage
Specified as a {{ Xref_csspercentage() }} of containing block's width.

Mozilla Extensions

-moz-max-content
{{ Fx_minversion_inline("3") }} The intrinsic preferred width.
-moz-min-content
{{ Fx_minversion_inline("3") }} The intrinsic minimum width.
-moz-available
{{ Fx_minversion_inline("3") }} The containing block width minus horizontal margin, border and padding.
-moz-fit-content
{{ Fx_minversion_inline("3") }} The same as -moz-max-content.

Examples

body  { max-width: 40em; }

table { max-width: 75%; }

form  { max-width: none; }
p { background: gold }

The Mozilla community produces a lot of great software.

p { background: lightgreen;
    max-width:  intrinsic;         /* Safari/WebKit */
    max-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

{{ Cssxref("max-width") }} overrides width, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.

Specifications

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416),
buggy before
applies to <table> no yes no yes no
intrinsic width  1.0 3.0 (1.9) {{ CompatNo() }} {{ CompatNo() }} 2.0 (412) ?
 intrinsic -moz-max-content intrinsic
intrinsic minimum width  {{ CompatNo() }} 3.0 (1.9) {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
-moz-min-content
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}
  • box model, {{ Cssxref("box-sizing") }}
{{ languages( { "de": "de/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The<code> max-width </code>CSS property is used to set the maximum width of a given element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified for <code>max-width</code>.</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("none") }}</li>
  <li><dfn>Applies to:</dfn> block level and replaced elements, for <code>&lt;table&gt;</code> see {{ Anch("Browser compatibility") }} below</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Percentages:</dfn> refer to the width of the containing block</li>
  <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> the percentage as specified or the absolute length or <code>none</code></li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre>max-width:  &lt;length&gt; | &lt;percentage&gt; | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    none</dt>
  <dd>
    The width has no maximum value.</dd>
  <dt>
    length</dt>
  <dd>
    See {{ Xref_csslength() }} for possible units.</dd>
  <dt>
    percentage</dt>
  <dd>
    Specified as a {{ Xref_csspercentage() }} of containing block's width.</dd>
</dl>
<h4 id="Mozilla_Extensions">Mozilla Extensions</h4>
<dl>
  <dt>
    -moz-max-content</dt>
  <dd>
    {{ Fx_minversion_inline("3") }} The intrinsic preferred width.</dd>
  <dt>
    -moz-min-content</dt>
  <dd>
    {{ Fx_minversion_inline("3") }} The intrinsic minimum width.</dd>
  <dt>
    -moz-available</dt>
  <dd>
    {{ Fx_minversion_inline("3") }} The containing block width minus horizontal margin, border and padding.</dd>
  <dt>
    -moz-fit-content</dt>
  <dd>
    {{ Fx_minversion_inline("3") }} The same as <code>-moz-max-content.</code></dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre>body  { max-width: 40em; }

table { max-width: 75%; }

form  { max-width: none; }
</pre>
<pre>p { background: gold }
</pre>
<p style="background:gold">The Mozilla community produces a lot of great software.</p>
<pre>p { background: lightgreen;
    max-width:  intrinsic;         /* Safari/WebKit */
    max-width:  -moz-max-content;  /* Firefox/Gecko */
  }
</pre>
<p style="background:lightgreen; max-width:intrinsic; max-width:-moz-max-content">The Mozilla community produces a lot of great software.</p>
<pre>p { background: lightblue;  max-width: -moz-min-content; }
</pre>
<p style="background:lightblue; max-width:-moz-min-content">The Mozilla community produces a lot of great software.</p>
<h2 id="Notes">Notes</h2>
<p>{{ Cssxref("max-width") }} overrides width, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p>
<h2 id="Specifications">Specifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" title="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">CSS 2.1 #min-max-widths</a></li>
</ul>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>1.0 (1.0)</td>
        <td>7.0</td>
        <td>4.0</td>
        <td>2.0.2 (416),<br>
          buggy before</td>
      </tr>
      <tr>
        <td>applies to <code>&lt;table&gt;</code></td>
        <td>no</td>
        <td>yes</td>
        <td>no</td>
        <td>yes</td>
        <td>no</td>
      </tr>
      <tr>
        <td rowspan="2">intrinsic width</td>
        <td> 1.0</td>
        <td>3.0 (1.9)</td>
        <td rowspan="2">{{ CompatNo() }}</td>
        <td rowspan="2">{{ CompatNo() }}</td>
        <td>2.0 (412) ?</td>
      </tr>
      <tr>
        <td> <code>intrinsic</code></td>
        <td><code>-moz-max-content</code></td>
        <td><code>intrinsic</code></td>
      </tr>
      <tr>
        <td rowspan="2">intrinsic minimum width</td>
        <td rowspan="2"> {{ CompatNo() }}</td>
        <td>3.0 (1.9)</td>
        <td rowspan="2">{{ CompatNo() }}</td>
        <td rowspan="2">{{ CompatNo() }}</td>
        <td rowspan="2">{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>-moz-min-content</code></td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}</li>
  <li><a href="/en/CSS/box_model" title="en/CSS/box_model">box model</a>, {{ Cssxref("box-sizing") }}</li>
</ul>
<div class="noinclude">
  {{ languages( { "de": "de/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</div>
Revert to this revision