CSS Max-width

Imagine wearing an elastic waist belt. It stretches comfortably to fit you, but it has a metal buckle that stops it from stretching past a certain point. This prevents it from getting loose and failing. CSS max-width is that belt buckle. A standard width setting acts like a rigid wooden box that never changes size, causing pages to break on mobile screens. Max-width allows elements to shrink fluidly on small screens, but caps their growth on larger monitors. This keeps your web tool containers looking clean on massive widescreen displays and highly usable on compact mobile phones.

In this page:

Max-width vs Width
Centering Containers with Auto Margins
Responsive Fluid Images
Max-width with Box-Sizing
Max-width with Viewport Units

Max-width vs Width

The standard width property defines a fixed horizontal size. If a screen is narrower than that width, the element overflows, causing a horizontal scrollbar. The max-width property allows the element to shrink to fit smaller screens, while capping its size on larger displays.

Note: Use max-width instead of width for main containers to make your pages responsive instantly.

Warning: If you set both width and max-width on the same element, the max-width value will override the width.

Example: Max-width vs Width

css

<style>
.narrow-container {
  width: 300px;
  border: 2px dashed #999;
  padding: 10px;
  overflow-x: auto;
}
.fixed {
  width: 600px;
  background: crimson;
  color: white;
  padding: 10px;
  margin-bottom: 10px;
}
.fluid {
  max-width: 600px;
  background: seagreen;
  color: white;
  padding: 10px;
}
</style>
<div class="narrow-container">
  <div class="fixed">width: 600px — overflows the 300px container</div>
  <div class="fluid">max-width: 600px — shrinks to fit the 300px container</div>
</div>

Centering Containers with Auto Margins

Setting a max-width on a block element is only half the battle. To keep it visually balanced, you can pair it with auto margins (margin: 0 auto). This instructs the browser to calculate the remaining space on both sides of the element and split it equally, centering the block.

Note: Margin auto only works if the element is block-level and has a defined width or max-width.

Warning: Do not apply margin auto to inline elements like spans, as they do not respect block margin calculations.

Example: Centering Containers with Auto Margins

css

<style>
.container {
  max-width: 400px;
  margin: 0 auto;
  background: lightblue;
  padding: 10px;
  text-align: center;
}
</style>
<div class="container">Centered container</div>

Responsive Fluid Images

By default, images load at their native pixel dimensions. If an image is 1200px wide, it will overflow on mobile screens. Applying max-width: 100% instructs the browser to scale the image down dynamically to fit its parent container.

Note: Always pair max-width: 100% with height: auto to maintain the image's original aspect ratio.

Warning: Avoid setting fixed inline HTML width and height attributes on images without using CSS to scale them.

Example: Responsive Fluid Images

css

<style>
img {
  max-width: 100%;
}
</style>
<img src="https://placehold.co/1200x400" alt="Scales down to fit its parent">

Max-width with Box-Sizing

By default, borders and padding add to an element's physical width. If you set max-width to 500px and add 20px of padding, the actual box expands to 540px. The box-sizing: border-box property forces borders and padding to sit inside your max-width.

Note: Set box-sizing: border-box globally to keep your layout calculations simple.

Warning: Neglecting border-box will cause containers with 100% max-width and padding to overflow and break layouts.

Example: Max-width with Box-Sizing

css

<style>
.box {
  max-width: 500px;
  padding: 20px;
  box-sizing: border-box;
  background: lightgoldenrodyellow;
  border: 2px solid goldenrod;
}
</style>
<div class="box">Padding stays inside the 500px max-width</div>

Max-width with Viewport Units

Using percentage limits can sometimes be restrictive. Viewport width (vw) units allow you to scale containers dynamically relative to the browser window size, which is useful for fluid grid layouts.

Note: Combine clamp() with viewport units to create highly responsive container scales.

Warning: Be careful when setting fluid widths on text containers, as lines can become too long and hard to read on ultra-wide monitors.

Example: Max-width with Viewport Units

css

<style>
.container {
  max-width: 90vw;
  background: lightpink;
  padding: 10px;
  margin: 0 auto;
}
</style>
<div class="container">Scales relative to the browser window width</div>

Common Mistakes

Using fixed widths instead of max-width on main page containers, causing layout-breaking horizontal scrolls on mobile.
Omitting border-box configuration, causing containers with 100% max-width and padding to overflow.
Applying fixed pixel widths to responsive image assets, stretching them out of shape on small screens.

Chapter Summary

The max-width property allows elements to scale down on smaller screens while capping their size on larger displays.
Center block containers horizontally on your page by pairing max-width with margin: 0 auto.
Use max-width: 100% on images to make them responsive, and set box-sizing: border-box globally to prevent layout overflow.

Browser Support

The max-width property and border-box sizing are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson CSS Hide Elements Next Lesson → CSS Position