max-width

  • Revision slug: CSS/max-width
  • Revision title: max-width
  • Revision id: 25737
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 3 words added, 1 words removed

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; }

Notes

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

Specifications

Browser compatibility

Browser Lowest Version applies to <table>
Internet Explorer 7.0 no
Firefox (Gecko) 1.0 (1.0) yes
Opera 4.0 yes
Safari (WebKit) 2.0.2 (416), buggy before no

See also

  • {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}
  • box model, {{ Cssxref("box-sizing") }}

{{ languages( { "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<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> <li>{{ Xref_cssinitial() }}: {{ Cssxref("none") }}</li> <li>Applies to: block level and replaced elements, for <code>&lt;table&gt;</code> see {{ Anch("<span class="attribute-value">Browser compatibility }}</span>")</span> below</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: refer to the width of the containing block</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: the percentage as specified or the absolute length or <code>none</code></li>
</ul><h3>Syntax</h3>
<pre>max-width:  &lt;length&gt; | &lt;percentage&gt; | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available</pre>
<h3>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>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>
<h3>Examples</h3>
<pre>body  { max-width: 40em; }

table { max-width: 75%; }

form  { max-width: none; }
</pre>
<h3>Notes</h3>
<p>{{ Cssxref("max-width") }} overrides width, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.</p>
<h3 name="Specifications">Specifications</h3>
<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>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th>applies to <code>&lt;table&gt;</code></th> </tr> <tr> <td>Internet Explorer</td> <td><strong>7.0</strong></td> <td>no</td> </tr> <tr> <td>Firefox (Gecko)</td> <td><strong>1.0</strong> (1.0)</td> <td>yes</td> </tr> <tr> <td>Opera</td> <td><strong>4.0</strong></td> <td>yes</td> </tr> <tr> <td>Safari (WebKit)</td> <td><strong>2.0.2</strong> (416), buggy before</td> <td>no</td> </tr> </tbody>
</table>
<h3>See also</h3>
<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>
<p>{{ languages( { "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}</p>
Revert to this revision