CSS max-width Property

CSS

max-width

Property

Example

Set the maximum width of a <p> element to 150 pixels:

p.ex1 {
  max-width: 150px;
}

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

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 the
width 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

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: none|length|initial|inherit;

Property Values

More Examples

Example

Set the maximum width of a <p> element to 50% of the container:

p.ex1 {
 
max-width: 50%;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Height and Width

CSS reference: min-width property

HTML DOM reference: maxWidth property