Example
Set the maximum width of a <p> element to 150 pixels:
p.ex1 {
max-width: 150px;
}
Try it Yourself »
Definition max-width
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change the height of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of thewidth property from becoming larger than max-width. The value of the max-width property overrides the width property.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Read about animatable Try it |
| Version: | CSS2 |
| JavaScript syntax: | object.style.maxWidth="600px" Try it |
Browser Support max-width
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| max-width | 1.0 | 7.0 | 1.0 | 2.0.2 | 7.0 |
CSS Syntax max-width
max-width: none|length|initial|inherit;
Property Values max-width
| Value | Description | Demo |
|---|---|---|
| none | No maximum width. This is default | Play it » |
| length | Defines the maximum width in px, cm, etc. Read about length units | Play it » |
| % | Defines the maximum width in percent of the containing block | Play it » |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples max-width
Example
Set the maximum width of a <p> element to 50% of the container:
p.ex1 {
max-width: 50%;
}
Try it Yourself »
Related Pages max-width
CSS tutorial: CSS Height and Width
CSS reference: min-width property
HTML DOM reference: maxWidth property