# Setting max-width

//the following example shows a <div> element with a height of 100 pixels
// and a max-width of 500 pixels

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
• The max-width property is used to set the maximum width of an element.
• Can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
• The value of the max-width property overrides width.
• The problem with the <div> above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page. Using max-width instead, in this situation, will improve the browser's handling of small windows.

## Setting max-width — Structure map

Clickable & Draggable!