Lesson 5 of 5 · 15–25 minutes

Page layout and positioning

🏠The everyday picture

The fixed parts of a room (the door, the windows) and a few things pinned in place, like a clock on the wall that stays put whatever you rearrange.

📘What it really is

A full page layout often uses Grid for the big areas:

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2rem;
}

a sidebar (one part) and main content (three parts).

Centring the content with a comfortable width:

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}

margin: 0 auto centres a block; the padding keeps text off the screen edges on phones.

Positioning moves elements out of the normal flow. Use it for small, specific jobs:
position: sticky; top: 0; keeps a header at the top while scrolling;
position: relative on a parent and position: absolute on a child places the child exactly within the parent (a "New" badge on a card's corner);
position: fixed stays put on screen (a chat button in the corner).
Avoid using positioning for main layout; Flexbox and Grid handle that better and adapt to screen sizes.

🖱️Try it

Wrap the content of each page in a .container so it's centred with a maximum width. Make your header sticky. Scroll a long page to check that it stays visible and doesn't cover the content beneath it.

✅Quick check

How do you centre a block of content with a maximum width?

Show the answer

Give it a max-width and margin: 0 auto.

An AI uses position: absolute for every part of a page. What will go wrong?

Show the answer

Elements are pinned to exact spots, so they overlap or break on other screen sizes. Main layout belongs to Flexbox and Grid.