Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
Export (0) Print
Expand All

min-width

Sets the minimum width for an element.

{ min-width: sMinWidth }

sMinWidth

Variant that specifies or receives the minimum height 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 Length units reference.

percentage

Integer followed by a percent sign (%) 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, the element has no minimum width and the min-width property is interpreted as 0%. For more information about containing blocks and how their widths are computed, see the Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) specification.

The property has no default value. It is not inherited.

The min-width and max-width attributes apply to floating and absolutely positioned block level elements and inline-block elements, and also to 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 element or a TEXTAREA element.)

This property is enabled only under the strict !DOCTYPE.

The following example shows how to constrain the width of a DIV element using min-width and max-width attributes. The example can be viewed only with Microsoft Internet Explorer 7 or a later version:

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

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, 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, LI, OL, OPTION, P, Q, RT, RUBY, S, SELECT, SPAN, SUB, TT, U, UL, VAR, XMP

Community Additions

ADD
Show:
© 2015 Microsoft