# max-width property

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

Typically the property is set for an element with a floating width (the width is set as a percentage or not set at all, and the element's width is expanded by its content). If the width of the element is set as a percentage, when the browser window is enlarged, it will increase until it reaches the `max-width` value.

## Syntax

`selector { max-width: value; }`

## Example

In this example, the width is a percentage of the parent's width. Increase the width of the browser window, and the container will also increase to accommodate the width of the browser window. However, it will only grow up to the value defined in max-width, which is `900px`. Once the container reaches this width, it will stop growing:

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

:

## Example

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

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

:

## See also

- the `min-width` property
  that sets a minimum 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