CSS Tutorial
CSS Max Width
max-width lets a box grow until a cap, then wrap. It is the usual way to stop a page getting too wide.
Why a cap beats a fixed width
A fixed width: 960px looks fine on a desk and overflows on a phone. max-widthsets a ceiling. The box can shrink with its parent. It will not grow past the cap. That is how Harbor studio keeps a reading column readable on a wide monitor without breaking a small screen.
Pair it with width: 100% so the box fills the space it has, then stop at the maximum. Center the leftover space with margin-left and margin-right set to auto.
A fluid studio card
This card fills a narrow preview. On a wider pane it stops at 28rem and sits in the middle. Text wraps instead of stretching into a long, hard-to-read line.
Example
<style>
.studio {
width: 100%;
max-width: 28rem;
margin: 0 auto;
padding: 1rem 1.25rem;
background: #e0f2fe;
border: 2px solid teal;
color: #0f766e;
}
.studio h1 {
margin: 0 0 0.5rem;
color: teal;
}
</style>
<article class="studio">
<h1>Harbor studio</h1>
<p>Open 8–16 on the north quay. The sky gallery holds twenty seats. Bring a jacket if the tide is in.</p>
</article>rem scales with the root font size. A cap of 28rem is about forty-five to seventy characters — a comfortable reading width. Pixels work too; they just ignore the reader’s type size.
Wide children that do not overflow
A large photo — or any child with a fixed pixel width — can burst out of a card. Setmax-width: 100% on the child. For real images, also set height: auto so the picture keeps its aspect ratio while it shrinks.
Example
<style>
.frame {
width: 100%;
max-width: 20rem;
padding: 0.75rem;
background: #ccfbf1;
border: 2px solid teal;
}
.photo {
display: block;
width: 800px;
max-width: 100%;
height: 6rem;
background: linear-gradient(#7dd3fc, teal);
}
.caption {
margin: 0.5rem 0 0;
color: #0369a1;
}
</style>
<figure class="frame">
<div class="photo" role="img" aria-label="Harbor water under a pale sky"></div>
<figcaption class="caption">Sky over the teal dock — 800px wide, capped at 100%.</figcaption>
</figure>width versus max-width
| Property | Effect | Use when |
|---|---|---|
width | Preferred size of the content box | You know the size, or you want 100% of the parent |
max-width | Ceiling — the box may be smaller | You want fluid layout that never gets too wide |
min-width | Floor — the box may be larger | A button or label must not squash |
If both width and max-width apply, the used width is the smaller of the two (after min-width). A box with width: 900px and max-width: 100% will shrink inside a 400-pixel parent.
A child with a large fixed width can still overflow a parent that only has max-width. Cap the child as well, or use max-width: 100% on images and nested cards.
A full-bleed header, a capped article
Headers often want the whole viewport. Body copy does not. Give the banner no max-width. Cap the article.
Example
<style>
.banner {
background: teal;
color: white;
padding: 1rem 1.25rem;
}
.copy {
width: 100%;
max-width: 36rem;
margin: 1rem auto;
color: #475569;
}
</style>
<header class="banner">Harbor studio — North quay</header>
<p class="copy">
Hours stay 8–16. The lantern desk takes walk-ins until the last tide board is posted.
</p>Related: Height and Width for min and max together, andAlign for centering a capped box with margin: auto.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Biology
A readable measure for a protocol
max-width lets a box grow until a cap, then wrap. 36rem or ~60–70 characters is a reading measure. A protocol that spans 1400 px is a swimming pool, not a page.
Pair with margin: 0 auto to centre the column on a wide screen.
Example
<style>
.prose { max-width: 36rem; margin: 0 auto; background: #fefce8; padding: 0.8rem; }
</style>
<div class="prose">
<h2>Fever</h2>
<p>Oral 38.0 °C or above is treated as fever in this protocol.</p>
</div>Astronomy
A fact card that stops growing
A 220 px card on a phone is fine. On a monitor without max-width it becomes a banner. The cap is the design, not a limitation of CSS.
Example
<style>
.card { max-width: 220px; background: #e0e7ff; padding: 0.7rem; }
</style>
<div class="card">Mars year ≈ 687 Earth days. The card wraps instead of stretching.</div>