| Inherited | Initial | Version |
|---|---|---|
| No | 0 |
CSS2 |
| IE7+ | FF1+ | SA2+ | OP9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
Syntax
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.
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 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| None | None | Full | Full | Full | Full | Partial | 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.
User-contributed notes
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.