CSS Website Layout
Display and Position taught boxes how to sit and stack. A website layout asks the bigger question: how do page regions — header, navigation, main story, sidebar, footer — share one screen calmly? Sketch the shell first; Flexbox and Grid will deepen the column craft soon.
A layout regions toolkit
📊 Page regions at a glance
| Region | Everyday job |
|---|---|
| Header | Site identity, primary actions, sometimes search |
| Navigation | Links to major sections (often inside or under the header) |
| Main | Primary content the page is about |
| Aside / sidebar | Related links, tips, secondary cards |
| Footer | Legal notes, secondary nav, contact crumbs |
| Container | Max-width wrapper that centers readable content |
Good layout starts in HTML landmarks, then CSS spacing and columns. Painting every box with position: absolute rarely scales.
Semantic page shell
Name regions with real elements. Classes can refine look, but landmarks keep structure honest for readers and assistive tech.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Centered max-width container
Long lines tire eyes. Wrap the readable column in a container with max-width and horizontal margin: auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Header bar basics
A header often spans the container or full bleed. Keep padding consistent and leave deep nav styling for the next lesson.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
A simple two-column sketch
Until Flexbox/Grid lessons, a calm float sketch can show main + aside. Prefer learning Flex/Grid next for real page columns — this is a bridge, not the forever plan.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Footer below the story
After floated columns, clear the footer so it drops under both columns. Later Flex/Grid layouts will contain columns without float clearfix habits.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
A calm layout habit
Landmarks first, container second, spacing third. Use float only as a temporary column sketch. Reach for Flexbox and Grid in the upcoming modules for durable page structure — not absolute piles or endless float grids.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
Try it yourself
- Build a landmark shell: header, nav, main, aside, footer.
- Wrap content in a
.containerwith max-width and centered margins. - Style a simple header bar with padding and a bottom border.
- Sketch main + aside with float widths, then clear the footer.
- Write one sentence: why will Flex/Grid replace this float sketch later?
Common mistakes
- Absolute-positioning every column of the page
- Letting text run full viewport width with no max-width
- Skipping semantic landmarks for anonymous div piles
- Treating this lesson like object-fit (media frames, not page regions)
- Shipping forever float page grids instead of learning Flex/Grid next
Summary
- Website layout is about page regions sharing one screen
- Use semantic landmarks plus a centered max-width container
- A float main/aside sketch can illustrate columns briefly
- Clear footers under floats; prefer Flex/Grid soon for structure
- Layout ≠ object-fit — regions vs media fitting inside a box
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top