Banded content is a page layout made from horizontal regions, or bands. Each band gets a background that reaches edge to edge across the browser window, while its text and images sit inside a narrower, centered area. Think of a wide stage with the performers sensibly kept out of the wings. section 10.1 section 10.5
The pattern fixes a common readability problem: text stretched across a wide window produces overly long lines. A band separates the two jobs so the outer element handles the full-width color or image, and a nested inner element limits and centers the foreground content. section 10.5
Build each band with two layers:
- Create an outer div for the band. Let it span the window and give it the background color or image. section 10.5
- Nest a div inside it for the actual content. Give this container a maximum width and center it with automatic side margins. section 10.5
- Reuse the same container structure in different bands, such as a header, description, testimonials, or product-version area. section 10.5
A landing page in stripes
A product landing page can use one band for a full-window header image, another for a white description area, and another plum-colored band for testimonials or product options. The backgrounds make each section distinct; the centered container keeps the copy from wandering across the whole screen. section 10.1 section 10.5
.container { #1
max-width: 800px; #1
margin: 0 auto; #1
clear: both; #1
}
.container::after { #2
content: ""; #2
display: block; #2
clear: both; #2
}
The container rules show the inner layer in action: max-width keeps content readable, margin: 0 auto centers it, and clearing handles floated content. section 10.5
