# Three columns with header and footer — layout recipe

## The idea

- A header and footer frame three columns, navigation on one side, the main content in the middle and extra facts on the other, so a busy page stays orderly.

## Use it for

- News and magazine front pages
- Community boards and forums
- Dashboards with a lot to show at once

## Avoid it when

- The page holds one simple message
- Most readers arrive on a phone and read one thing

## Regions

- Header — Spans the top with the site name, search and the main links.
- Navigation — Lists the sections of the site down one side.
- Main — Holds the content in the widest column, in the middle.
- Aside — Holds related facts and extras the reader may want next.
- Footer — Spans the bottom with secondary links and small print.

## How it reflows

- Phone: Every region stacks in one column: navigation, then main, then aside. (1 column)
- Tablet: Navigation and main sit side by side, and the aside moves below them across the full width. (2 columns)
- Desktop: Navigation, main and aside sit side by side in three columns, the main one widest. (3 columns)

## Principles

- Make the middle column clearly the widest
- Keep the side columns narrow and quieter than the main one
- Drop the aside below the main content first as the screen narrows
- Keep the header and footer across the full width at every size