CSS — Website Layout

The universal skeleton

<body>
    <header>…</header>
    <main>…</main>
    <footer>…</footer>
</body>

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main { flex: 1; }        /* footer sticks to bottom even on short pages */

flex:1 on main absorbs leftover height — the sticky-footer pattern in three lines. Every site needs this foundation.

Layout 1 — content + sidebar (grid)

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;   /* fixed rail + fluid body */
    gap: 32px;
    max-width: 1200px;
    margin-inline: auto;
    padding: 24px;
}

<div class="layout">
    <aside>Sidebar</aside>
    <div>Content</div>
</div>

Mobile collapse is one query:

@media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; }
    aside { order: 2; }       /* sidebar drops below content */
}

Layout 2 — the holy grail

Header, nav rail, content, aside, footer — named areas read like a diagram:

.page {
    display: grid;
    grid-template-areas:
        "header header"
        "nav    main"
        "footer footer";
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.page > header  { grid-area: header; }
.page > nav     { grid-area: nav; }
.page > main    { grid-area: main; }
.page > footer  { grid-area: footer; }

@media (max-width: 700px) {
    .page {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "footer";
        grid-template-columns: 1fr;
    }
}

Rearranging an entire responsive page = editing one ASCII-art string.

Layout 3 — centered container

The wrapper every real site has:

.container {
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 24px;
}

Wrap each section's contents — never let text run edge-to-edge on wide monitors.

Composition strategy

body-level      → flex column (sticky footer)
page regions    → grid (named areas or column templates)
inside sections → whatever fits: cards grid, flex toolbar, multicol text
tiny pieces     → inline utilities, margins

Each layer stays simple because responsibilities are separated.

Common layout bugs checklist

Symptom	Cause
Footer floats mid-screen	missing `min-height: 100vh` / `flex:1`
Sidebar squashes	needs `min-width` or `0 0 240px` flex
Content touches screen edges	no container/padding
Horizontal scrollbar	fixed widths without max-width
Uneven gaps	mixing margin hacks instead of `gap`

A complete mini-page

<body class="page">
    <header><div class="container">Logo · Nav</div></header>
    <div class="layout container">
        <aside>Courses list</aside>
        <main>
            <article>Lesson content</article>
            <article>Another lesson</article>
        </main>
    </div>
    <footer><div class="container">© 2026</div></footer>
</body>

Sticky-footer body + two-region grid + centered containers — that IS most websites' structure.

Mini Practice

Sticky-footer skeleton; test with a one-line and a huge main.
Sidebar layout collapsing under 800px with order swap.
Holy-grail via template areas; flip to stacked mobile.
Add a centered container to every region.
Audit: find and fix each checklist bug in a broken demo file.

Next: home → (course wrap-up)

Frequently Asked Questions about Website Layout

What is Website Layout in CSS?

Website Layout is a fundamental concept in CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Website Layout?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Website Layout.

Why is Website Layout important in CSS?

Website Layout is essential for CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.