CSS Max-width Property

The css max-width property can be used to give flexible layouts a maximum width.

The CSS max-width property can be used to specify a max-width for a HTML element, this is especially useful for typical container elements.

A common practice by designers, is to "wrap" the website in one containing block element, typically a div, which can then have a max-width applied.

Suggested uses of max-width

In flexible layouts, the max-width property gives the designer a finer control, over what happens if the available width far exceeds, that which is required by the design. It also effectively overcomes a problem where lines of text can get very long, when users maximize a browser window, on a high screen resolution.

It can also be used in combination with CSS Media Queries, to design for devices with smaller screens.

Possible Values

Read: Units of Measurement, to get a understanding the many possible values.

Max-width example

The below example assumes, that a website is wrapped in a div container, with an id of Basement.

#Basement {
  width: 90%;
  max-width: 1600px;
  min-width: 728px;
}