min-width (CSS property)

Spec
Inherited Initial Version
No 0 CSS2
Browser support (more…)
IE8+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

min-width: { length | percentage | inherit } ;

Description

This property sets the minimum content width of a block or a replaced element. This minimum width does not include padding, borders, or margins—see The CSS Box Model.

An element to which min-width is applied will never be narrower than the minimum width specified, but it will be allowed to grow normally if its content exceeds the minimum width set.

min-width is often used in conjunction with max-width to produce a width range for the element concerned.

Note: Combining min-width and width

It should be noted that min-width and width values should not be applied to the same element if they use the same unit, as one will override the other. For example, if the width is set to 150px and the min-width is set to 60px, the actual width of the element is 150px, and the min-width declaration becomes redundant:

#example {
  min-width: 60px;
  width: 150px;
}

In the above example, the width of the element will be fixed at 150px.

However, it’s acceptable to set both min-width and width when their values are given in different units:

#example {
  min-width: 3em;
  width: 138px;
}

As the min-width is based on em units, at some stage, due to text resizing (for example), the em width may be larger than the 138px width we’ve set. In cases such as this, the element will be allowed to expand further than the 138px width, thus accommodating the resizing of the em-based text.

If the contents of a block require more horizontal space than is afforded by the limits that have been set, the behavior is defined by the overflow property.

Example

This style rule assigns a minimum width of 100 pixels to paragraphs within the element with ID "example":

#example p {
  min-width: 100px;
}

Value

The property takes a CSS length (px, pt, em, and so on), or a percentage. Negative length values are illegal.

Percentage values refer to the width of the element’s containing block. If the containing block’s width is negative, the used value is zero.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Buggy Buggy Buggy Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Safari’s support for this property, when applied to positioned elements, is limited to versions 2.0.2 or above.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Internet Explorer for Windows version 7 treats min-width on input elements as width. This can be remedied by adding overflow visible to the input and is incidentally the same fix required to make IE6/7 take proper note of horizontal padding).

User-contributed notes

ID:
#7
Contributed:
by Paul O'B
Date:
Thu, 15 Jul 2010 20:24:42 GMT

IE6 and under have no support for min-width/max-width min-height/max-height.

The reference should be amended.

ID:
#6
Contributed:
by mdimitrov
Date:
Tue, 18 Aug 2009 07:50:13 GMT

Internet Explorer 7 does not allow the width of "input[type=submit]" elements to exceed the value specified with "min-width". Essentially in this case "min-width" is equivalent to "width".

Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>min-width</title>
</head>
<style type="text/css">
input {
min-width: 50px;
}
</style>
<body>
<form action="">
<input type="submit" value="Very Long Text For Submit Button" />
</form>
</body>
</html>

To workaround this problem one needs to apply also "overflow: visible;" to the button.

Related Products