Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS max-width

The max-width property sets the maximum width of an element.

It prevents an element from becoming any larger than the specified value.

Example

#

An element with a 500-pixel max-width value. Resize the browser and the element will never get any larger than the max-width.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter.
<style>
  .max {
    border: 1px solid tomato;
    padding: 15px;
    max-width: 500px;
  }
</style>

<div class="max">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as a
  painter.
</div>    

Syntax

max-width: none | length | initial | inherit;

Values

#

Value Description
none Default. No maximum width.
length Sets the maximum width. Use any valid CSS length value.
% Sets the maximum width in percent.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More examples

An element with a 50% maximum width.
Resize the browser to see that it remains 50% of the container.

Henri Matisse was a French artist, known for both his use of color and his fluid and original draughtsmanship. He was a draughtsman, printmaker, and sculptor, but is known primarily as a painter.
<style>
  .max-width {
    border: 1px solid steelblue;
    padding: 15px;
    max-width: 50%;
  }
</style>

<div class="max-width">
  Henri Matisse was a French artist,
  known for both his use of color and
  his fluid and original draughtsmanship.
  He was a draughtsman, printmaker, and
  sculptor, but is known primarily as a
  painter.
</div>    

Browser support

This table shows when max-width support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
7.0 Oct 2006
Opera
7.0 Jan 2003
Safari
2.0.2 Oct 2005

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides