4 out of 6 rated this helpful - Rate this topic

min-width property

[This documentation is preliminary and is subject to change.]

Sets or retrieves the minimum width for an element.

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 To	All elements
Media	visual
Inherited	no
Initial Value

Standards information

CSS 2.1, Section 10.4

Remarks

min-width 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.

Examples

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.

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

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>

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

3/31/2008
Mitch 74