Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
max-width

max-width

Specifies the maximum width of an element.

Sample Code

style.css

/* px: cap width at 500px */
p.test { max-width: 500px;}

/* none: no maximum width (initial value) */
p.test2 { max-width: none;}

/* %: up to 80% of the parent element */
p.test3 { max-width: 80%;}

/* Classic responsive layout pattern */
.container { max-width: 1200px; margin: 0 auto;}

/* Prevent images from overflowing their container */
img { max-width: 100%; height: auto;}

/* Limit line length for readability */
article { max-width: 65ch;}

Available Values

Value	Description
none	No maximum value is specified. The initial value is 'none'.
number	A numeric value. Commonly used units are 'px' and '%'. Negative values are not allowed. When specified as '%', the reference size is the width of the containing block.

Browser Display Result

<div style="max-width: 500px; background-color: #ff0;">This is a div element. 'max-width: 500px' is specified.</div>

<div style="width: 500px; border: solid 1px #f00;">
	<div style="max-width: 80%; width: 500px; background-color: #ff0;">This is a div inside a div. The parent div (red border) has 'width: 500px'. This element (yellow background) has 'max-width: 80%' and 'width: 500px'. Its maximum width is relative to the parent's width, giving a maximum of '400px'. Since '400px' is less than 'width: 500px', this element's width becomes '400px'.</div>
</div>