maxWidth property

Article
05/02/2017

Sets or retrieves the maximum width for an element.

Syntax

Integer value = object.put_maxWidth(Variant v);Integer value = object.get_maxWidth(Variant* sMaxWidth);

Property values

Type: VARIANT

The maximum width for an element.

length (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 Values and Units Reference.

percentage (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 IHTMLRuleStyle5::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.

String format

<length> | <percentage>

CSS information

Applies To	All elements
Media	visual
Inherited	no
Initial Value	none

Standards information

CSS 2.1, Section 10.4

Remarks

IHTMLRuleStyle5::maxWidth was introduced in Windows Internet Explorer 7.

The IHTMLRuleStyle5::minWidth/IHTMLRuleStyle5::maxWidth 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.

When using IHTMLRuleStyle::display:flex or IHTMLRuleStyle::display:"-webkit-box", the IHTMLRuleStyle5::maxWidth of flex items is clamped to the available space inside the flex container.

Examples

The following example shows how to constrain the width of a div element using IHTMLRuleStyle5::minWidth and IHTMLRuleStyle5::maxWidth attributes. The example requires Internet Explorer 7 or later to view.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/minWidth7.htm

<!DOCTYPE html>
<html>
<head>
  <title>CSS</title>
  <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 accommodate the flow of text.
      </p>
    </div>
  </div>
</body>
</html>

Requirements

Minimum supported client	Windows XP
Minimum supported server	Windows 2000 Server
Header	Mshtml.h
IDL	Mshtml.idl
DLL	Mshtml.dll

Share via