CSS min-width Property
The min-width property sets the minimum width of an element.
Possible Values
- A length value:
- em - relative unit - the width of the 'font-size' of the font in use.
- ex - relative unit - the height of the letter 'x' in the current font.
- in - absolute unit - inches.
- mm - absolute unit - millimeters.
- cm - absolute unit - centimeters.
- pt - absolute unit - points - a point is 1/72nd of an inch.
- pc - absolute unit - picas - one pica = 12 pt.
- px - absolute unit - pixel - one pixel = 0.75 pt.
- a percentage - in relation to the width of the block that contains the box.
- inherit - the value is inherited from the parent element.
The min-width property doesn't apply to table rows or table row groups, it also cannot be used on non-replaced inline elements.
Code Example
p{min-width: 450px;}
As with the other CSS width and height properties min-width only affects the content area box in an element and has no bearing on margins, padding or borders.
One useful application of min-width is when you have a liquid display but don't want the display width to become so narrow
that the pages collapse totally and become illegible, something which can happen with liquid displays if the size of the browser window
is reduced beyond a certain point. If you add a min-width declaration to the <body>
element you can ensure that the layout integrity is preserved even though scrollbars will have to be added by the browser.