HomeLibraryLearnDownloadsSupportCommunity
Sign in |United States - English |Preferences
Expand
min-width Attribute | minWidth Property

Sets or retrieves the minimum width for an element.

Syntax

HTML { min-width : sMinWidth }
Scripting[ sMinWidth = ] object.style.minWidth [ = v ]

Possible Values

sMinWidthString 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 CSS Length Units.
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 minWidth 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) World Wide Web link 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

minWidth was introduced in Windows Internet Explorer 7.

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.

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.

Copy

<!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 accommodate 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) World Wide Web link.

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, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor

See Also

Community ContentAdd
AnnotationsFAQ
Error in description
The property controls width, but the content talks about height and needs to be corrected.  I know MS doesn't want bug reports here, but they put just too many barriers in the way of reporting the bug, so here is where they get it.
History
Workaround for CPU spikes in IE 7
Sometimes, when you define a block element with scrollable overflow, if its content includes some variable size elements (such as elements which resize on mouseover or on :hover), you may get a 100% CPU spike under IE 7 if these variable size elements are located outside of the viewport, and a jumpy scrollbar. This CPU spike will slow down your system, make it unworkable if left unattended, crash IE 7 in some cases, and may even hard crash (BSOD) Windows XP (it happened to me at least once).

If you give a positive, non-zero, pixel-rated min-height to these elements (both scrollable element and its variable size children), IE 7 will happily drop CPU load and compute everything correctly. Please note that although this workaround does work, you need to specify it for every and all elements with a dynamic size: it may be a good idea to carefully craft your CSS classes so as to not make your code unwieldy.
IE 6 not being affected by the bug, doesn't need nor suffers from the workaround. Other browsers shouldn't have problems with it either if you use reasonable values.
History
Page view tracker