A band outside, the contents inside

01 / 05

Colour to the edges, words in the middle

Think of the sites you have been looking at. The background colour runs from edge to edge of the screen, while the words sit only in a narrow strip down the middle.

That shape is made by putting one box inside another.

02 / 05

The outer box becomes the band

The outer div gets no width. A block spreads across the full width anyway, so a background colour alone makes a band that reaches the edges.

Space goes top and bottom only. padding: 48px 0; means "48px above and below, 0 on the sides".

.band {  background-color: #f6efe0;  padding: 48px 0;}

03 / 05

The contents go in the inner box

The inner div gets a width and margin: 0 auto. Words and pictures go only inside this one.

Keep the inner width the same however the bands change, and the left edge of the text lines up from top to bottom.

.inner {  width: 600px;  margin: 0 auto;}

04 / 05

The HTML looks like this

A div inside a div. The outer one is colour, the inner one is contents — the work is split between them.

Stacking that same shape from the top down is the basic method for building a page.

<div class="band">  <div class="inner">    <h2>This week's set meals</h2>  </div></div>

05 / 05

Stack bands and you have a page

Change the colour band by band and where one subject ends becomes visible.

In this round the outer frame, .page, is already there for you. Build the band-and-contents pairs yourself.