Marusya's School Notes

Set Max-Width

The max-width property is used to set the maximum width of an element.This property can be set to auto (this is default, which means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block (element).

The problem with some elements is that they might sometimes be wider than the browser window. The browser then adds a horizontal scrollbar to the page. Using max-width will improve the browser's handling of small windows.

The following two examples will demonstrate the difference between using width or max-width. Drag the browser window to smaller than 500px wide, to see the difference between the two!

The CSS for this <div> element:
div { width: 500px;
height: 100px;
border: 3px solid #8AC007; }

The CSS for this <div> element:
div { max-width: 500px;
height: 100px;
border: 3px solid #8AC007; }

Note: The value of the max-width property overrides width.