# min-width property

The `min-width` property sets a minimum width of an element. The property value is any size units or the keyword `none`, meaning no value.

Typically set for an element with a floating width (the width is set as a percentage or not set at all, and the element is expanded in width by its content). If the width of the element is set as a percentage, when the browser window is reduced, it will decrease until it reaches the `min-width` value.

## Syntax

`selector { max-width: value; }`

## Example

In this example, the width is a percentage of the parent's width. Reduce the width of the browser window and the container will also shrink to fit the width of the browser window. However, it will only shrink to the value defined in `min-width`, which is `400px`. Once the container reaches this width, it will stop shrinking:

`<div id="elem"></div>` `#elem { width: 70%; min-width: 400px; height: 300px; border: 1px solid black; }`

:

## Example

In this example, the container width is limited on both sides: it cannot become larger than `900px` and smaller than `400px`:

`<div id="elem"></div>` `#elem { width: 70%; min-width: 400px; max-width: 900px; height: 100px; border: 1px solid black; }`

:

## See also

- the `max-width` property
  that sets a maximum width of an element
- the `max-height` property
  that sets a maximum height of an element
- the `min-height` property
  that sets a minimum height of an element

← →
↑
en ru