A CSS percentage is a relative measurement: instead of naming a fixed number of pixels, it takes a share of a reference size. Think “three quarters of this container,” not “some mysterious slice of the whole internet.” For a child with `width: 75%`, the reference is its parent’s width. A child inside an 800-pixel-wide parent therefore becomes 600 pixels wide—even if the browser window itself is much wider. section 14.3
That makes percentages especially handy for liquid layouts. Fixed pixel columns can fit one screen and misbehave on another; relative widths let horizontal layout measurements flex with their container. Use percentages for widths, left and right padding, and left and right margins when the design should grow or shrink with the available parent width. section 14.11 section 14.12
Make a width relative to its container
Start with the idea in plain English: “Make this article three quarters as wide as its parent.” Then write: `article { width: 75%; }` If the parent is 800 pixels wide, the article is 600 pixels wide. If that parent changes size, the article’s width changes too. This is the useful bit: the percentage follows the container, rather than stubbornly keeping a fixed pixel width. section 14.3
Percentages are relative, but they are not automatically relative to the browser screen. If you want a measurement based on the entire browser viewport rather than a parent element, use viewport units such as `vw` or `vh`. A `75%` child may occupy only part of a wide screen because it is still measuring its parent, not the viewport. Tiny distinction; enormous potential for head-scratching. section 14.3 section 7.6
For responsive measurements, use this practical split:
- Use percentages for horizontal widths, padding, and margins that should scale with a parent container. section 14.11
- Use `rem` for vertical padding and margins, and for horizontal sizing when tighter control is needed. section 14.11
- Use `vw` for measurements that should scale with viewport width and `vh` for ones that should scale with viewport height. section 14.11
- Pair flexible layouts with media queries when different screen sizes need changed sizes, layout, or visibility. section 14.12
One caution before sprinkling percent signs everywhere: percentage padding and margins can produce surprising results because they are relative to the parent element’s width. If spacing starts looking bizarre, switch that padding or margin to `rem` for more predictable control. Also, be careful with fixed heights for text: content can outgrow a height you guessed earlier. section 14.11 section 9.2
.container {
max-width: 60rem; #1
}
header {
padding: 1rem 1.67%; #2#3
}
h1 {
padding-left: 1.67%; #3
}
.quotation {
padding-right: 1.67%; #3
}
article {
flex-basis: 20rem;
padding-top: 1rem;
padding-left: 1.67%;
}
p {
margin-bottom: 1rem;
}
aside {
flex-basis: 10rem;
padding: 1rem 1.67%;
}
div {
padding-bottom: .5rem;
}
footer {
padding: 1rem 1.67%;
}
This responsive layout mixes a `60rem` maximum container width with `1.67%` horizontal padding. Notice how the percentage padding repeats across the header, article, aside, and footer, giving each area proportional side space while the container remains capped. section 14.11
Percentages help a page stay flexible, not automatically perfect. A liquid layout can fit a tablet or phone without horizontal scrolling, yet columns may become too narrow to read comfortably. Use relative widths as the starting move, then add limits such as `max-width` or adapt the layout with media queries when the screen gets cramped. section 14.3 section 14.12
