max-width

  • Revision slug: CSS/max-width
  • Revision title: max-width
  • Revision id: 25720
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment /* Values */

Revision Content

{{template.CSSRef()}}

Summary

The max-width property is used to set the maximum width of a given element.

  • Initial value: none
  • Applies to: block level and replaced elements
  • Inherited: no
  • Percentages: refer to the width of the containing block
  • Media: Visual

Syntax

 max-width: [ <length> || <percentage> ] none

Values

  • none : the browser will make the element as wide as necessary to fit its content
  • length : can be in px, cm, in
  • percentage : % specified as a percentage of parent element's width
  • -moz-intrinsic : the intrinsic preferred width {{template.Fx_minversion_inline(3)}}
  • -moz-min-intrinsic : the intrinsic minimum width {{template.Fx_minversion_inline(3)}}
  • -moz-fill : the containing block width minus horizontal margin, border, and padding {{template.Fx_minversion_inline(3)}}
  • -moz-shrink-wrap : the same as moz-intrinsic {{template.Fx_minversion_inline(3)}}

Examples

{{template.CSSRefExampleLink("max-width")}}

table{max-width: 75%;}

form{max-width: none;}

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 6
Netscape 6
Opera 3.5

See also

box model, {{template.Cssxref("height")}}, {{template.Cssxref("-moz-box-sizing")}}, {{template.Cssxref("max_width")}}

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>max-width</code> property is used to set the maximum width of a given element.
</p>
<ul><li> Initial value: none
</li><li> Applies to: block level and replaced elements
</li><li> Inherited: no
</li><li> Percentages: refer to the width of the containing block
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval"> max-width: [ &lt;length&gt; || &lt;percentage&gt; ] none
</pre>
<h3 name="Values"> Values </h3>
<ul><li> <b>none</b> : the browser will make the element as wide as necessary to fit its content
</li><li> <b>length</b> : can be in px, cm, in 
</li><li> <b>percentage</b> : % specified as a percentage of parent element's width 
</li><li> <b>-moz-intrinsic</b> : the intrinsic preferred width {{template.Fx_minversion_inline(3)}}
</li><li> <b>-moz-min-intrinsic</b> : the intrinsic minimum width {{template.Fx_minversion_inline(3)}}
</li><li> <b>-moz-fill</b> : the containing block width minus horizontal margin, border, and padding {{template.Fx_minversion_inline(3)}}
</li><li> <b>-moz-shrink-wrap</b> : the same as <code>moz-intrinsic</code> {{template.Fx_minversion_inline(3)}}
</li></ul>
<h3 name="Examples"> Examples </h3>
<p>{{template.CSSRefExampleLink("max-width")}}
</p>
<pre>table{max-width: 75%;}

form{max-width: none;}
</pre>
<h3 name="Notes"> Notes </h3>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS2/visudet.html#min-max-widths">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Browser</th>
    <th>Lowest Version</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="See_also"> See also </h3>
<p><a href="en/CSS/box_model">box model</a>, {{template.Cssxref("height")}}, {{template.Cssxref("-moz-box-sizing")}}, {{template.Cssxref("max_width")}}
</p>
Revert to this revision