Sets or retrieves the maximum width for an element.
Syntax
| HTML |
{ max-width : sMaxWidth }
|
|---|
| Scripting | [ sMaxWidth = ] object.style.maxWidth [ = v ] |
|---|
Possible Values
| sMaxWidth | String that
specifies or receives the maximum width for an element.| length | Floating-point number followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Length Units. | | percentage | Integer followed by a % that specifies a percentage of the containing block width to use as the maximum width of the element. If the width of the containing block is not explicitly set, then the element has no maximum width and the maxWidth property is interpreted as 0%. For more information on containing blocks and how their widths are computed, see the Cascading Style Sheets, Level 2.1 (CSS2.1)  specification. |
|
The property is read/write
for all objects except the following, for which it is read-only:
currentStyle.
The property has no default value. The Cascading Style Sheets (CSS) attribute is
not inherited.
Remarks
maxWidth was introduced in Windows Internet Explorer 7.
The min-width/max-width attributes apply to floating and absolutely positioned block level elements 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.
Example
The following example shows how to constrain the width of a DIV element using min-width and max-width attributes. The example requires Internet Explorer 7 or later to view.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<style>
.width {
width:50%;
min-width:200px;
max-width:400px;
background:#eee;
}
.content {
border:1px solid #c00;
padding:5px;
}
</style>
</head>
<body>
<div class="width">
<div class="content">
<h2>{ min-width:200px; max-width:400px }</h2>
<p>This div also has a width of 50%. Resize the window
to grow and shrink the div from max to min width.<br/><br/>
The outer div controls the width of the inner "content" div.
Note that the div height increases to accomodate the flow of text.</p>
</div>
</div>
</body>
</html>
This feature requires Microsoft® Internet Explorer 6 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Standards Information
This property is defined in
Cascading Style Sheets (CSS), Level 2 (CSS2) .
Applies To
|
A,
ABBR,
ACRONYM,
ADDRESS,
APPLET,
B,
BDO,
BIG,
BLOCKQUOTE,
BUTTON,
CAPTION,
CENTER,
CITE,
CODE,
currentStyle,
CUSTOM,
DD,
DEL,
DFN,
DIR,
DIV,
DL,
DT,
EM,
FIELDSET,
FONT,
FORM,
hn,
HR,
I,
IMG,
INPUT type=button,
INPUT type=checkbox,
INPUT type=file,
INPUT type=image,
INPUT type=password,
INPUT type=radio,
INPUT type=reset,
INPUT type=submit,
INPUT type=text,
INS,
KBD,
LABEL,
LEGEND,
LI,
LISTING,
MENU,
NOBR,
OL,
OPTION,
P,
PRE,
Q,
RT,
RUBY,
runtimeStyle,
S,
SAMP,
SELECT,
SMALL,
SPAN,
STRIKE,
STRONG,
style,
SUB,
SUP,
TEXTAREA,
TT,
U,
UL,
VAR,
XMP |
See Also
Cascading Style Sheet Compatibility in Internet Explorer 7