CSS - max-width Property

Quiz

CSS max-width property sets the maximum width of an element. The height of the element rises, if it exceeds the maximum width of an element. If the content fits well within the maximum width of an element, there is no effect.

Syntax

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

Property Values

Value	Description
none	It sets no limit to the width of the element. Default.
length	The maximum width of an element is set using length units (e.g. px, em, rem etc.).
percentage	The maximum width of an element is set using percentage values (e.g. 10%) relative to the size of the container.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Max Width Property

The following examples explain the max-width property with different values.

Max Width Property with None Value

To not set any limit on the width of an element, we can use the none value. The defined width will be applied to the element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 120px;
         padding: 5px;
         max-width: none;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-width property
   </h2>
   <h4>
      max-width: none (the defined width 
      value will be applied)
   </h4>
   <div class="container">
      TutorialsPoint is an online platform offering free 
      tutorials and resources on various topics including 
      programming, web development, and data science. It 
      provides structured lessons, examples, and quizzes 
      for effective learning.
   </div>
</body>
</html>

Max Width Property with Length Values

To set the maximum limit on the width of an element, we can specify the maximum width value using length units (e.g. px, em, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         width: 300px;
         height: 120px;
         padding: 5px;
         background-color: lightgreen;
      }

      .ex1 {
         max-width: 200px;
      }

      .ex2 {
         max-width: 250px;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-width property
   </h2>
   <h4>
      max-width: 200px (the maximum width is 200px, 
      if content is larger, the height will increase.)
   </h4>
   <div class="container ex1">
      TutorialsPoint is an online platform offering free 
      tutorials and resources on various topics including 
      programming, web development, and data science. It 
      provides structured lessons, examples, and quizzes 
      for effective learning.
   </div>
   <br/>
   <h4>
      max-width: 250px (the maximum width is 250px, 
      in the following example content is not greater 
      than the width, so no height change occurs.)
   </h4>
   <div class="container ex2">
      TutorialsPoint is an online platform offering free 
      tutorials and resources on various topics including 
      programming, web development, and data science. It 
      provides structured lessons, examples, and quizzes 
      for effective learning.
   </div>
</body>
</html>

Max Width Property with Percentage Values

To set the maximum limit on the width of an element, we can specify the maximum width value using percentage values (e.g. 10%) relative to the size of the containing element. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         width: 400px;
         height: 180px;
         padding: 5px;
      }

      .inner-container {
         width: 100%;
         width: 100%;
         position: relative;
      }

      .color {
         background-color: lightgreen;
      }

      .ex1 {
         max-width: 40%;
      }

      .ex2 {
         max-width: 90%;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-width property
   </h2>
   <h4>
      max-width: 55% (the maximum width is 55% of the 
      inner-container's width, height increases, if 
      content is larger than the max-width as in this case.)
   </h4>
   <div class="outer-container">
      <div class="inner-container">
         <div class="ex1 color">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
         </div>
      </div>
   </div>
   <br/>
   <h4>
      max-width: 90% (the maximum width is 90% of the 
      inner-container's width, height does not increase 
      as max-width accomodates all the content)
   </h4>
   <div class="outer-container">
      <div class="inner-container">
         <div class="ex2 color">
            TutorialsPoint is an online platform offering free 
            tutorials and resources on various topics including 
            programming, web development, and data science. It 
            provides structured lessons, examples, and quizzes 
            for effective learning.
         </div>
      </div>
   </div>
</body>
</html>

Supported Browsers

Property
max-width	1.0	7.0	1.0	2.0.2	7.0

css_reference.htm

Print Page