Three columns with header and footer

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.

Copy the idea

See it live

A labelled wireframe of the pattern, made for this explorer. Switch the width to watch its regions reflow from phone to desktop.

Copy the idea

Take the pattern with you as a brief for a person or as instructions for an AI assistant: its regions, how it reflows and the rules for using it.

# 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

Lay out the page with the "Three columns with header and footer" pattern.

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.

It suits:
- News and magazine front pages
- Community boards and forums
- Dashboards with a lot to show at once
It is a poor fit when:
- The page holds one simple message
- Most readers arrive on a phone and read one thing

Build the page from these 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.

Reflow it at each width:
- 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)

Follow these 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

Apply the idea and the rules above; do not copy any existing website.

Download brief (.md)

Regions

The parts of the page and the job each one does.

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 390 · 1 column: Every region stacks in one column: navigation, then main, then aside.
Tablet 768 · 2 columns: Navigation and main sit side by side, and the aside moves below them across the full width.
Desktop 1440 · 3 columns: Navigation, main and aside sit side by side in three columns, the main one widest.

Where it fits

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

Principles

The rules that keep the pattern working at every width.

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