Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

min-width property

Sets or retrieves the minimum width for an element.

CSS 2.1, Section 10.4

Syntax

min-width: <length> | <percentage>

Property values

A Variant that specifies or receives the minimum 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 Values and Units Reference.

percentage

Integer followed by a % that specifies a percentage of the containing block width to use as the minimum width of the element. If the width of the containing block is not explicitly set, then the element has no minimum width and the min-width 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.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value0

Standards information

Remarks

min-width was introduced in a Windows Store app using JavaScript.

The min-width/max-width 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.

Examples

The following example shows how to constrain the width of a div element using min-width and max-width attributes. The example requires a Windows Store app using JavaScript or later to view.


<!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>

See also

CSSStyleDeclaration
currentStyle
runtimeStyle
style
Cascading Style Sheet Compatibility in Internet Explorer 7

 

 

Show:
© 2014 Microsoft