Topic 6: DIV – Page Design

📖 10 min read · 🎯 intermediate · 🧭 Prerequisites: transition-animations, css-advance

Why this matters

You've picked up CSS animations and selectors — but here's the thing: styling means nothing if your page content is just a jumbled pile of text and images with no structure. Think about any website you visit — it has a top bar, a navigation menu, a main content area, maybe a sidebar. None of that separation happens by accident. It's all built with <div> tags. A <div> is just a box — a container — and once you learn to nest boxes inside boxes, you can lay out any page you can imagine. That's exactly what we're building today.

What You'll Learn

What a <div> is and why it is a block-level element
How to use multiple <div> tags with id attributes to define distinct page regions
How to apply CSS margin rules to create visual separation between sections
How to assemble a complete five-section page layout: header, navigation, main content, sidebar, and footer

The Analogy

Think of moving house. You pack every room into its own labeled box — kitchen stuff in one, books in another, bathroom items in a third. When the truck arrives you know exactly where each box goes and nothing is jumbled together. A <div> is exactly that labeled moving box for your webpage: a container you name, fill with whatever content belongs there, and then arrange on the page using CSS margins and positioning. Just as boxes keep your move sane, <div> tags keep your HTML sane — each region of the page has a clear boundary, a clear purpose, and room to breathe.

Chapter 1: What Is a `<div>` Element?

A <div> (short for division) is a generic block-level container in HTML. Two properties define its default behavior:

Starts on a new line — the browser inserts a line break before and after every <div>, so each one stacks vertically by default.
Stretches full width — unless you constrain it with CSS, a <div> expands horizontally to fill its parent container from left edge to right edge.

These two traits make <div> the natural tool for carving a page into discrete, stacked regions. Unlike semantic tags (<header>, <nav>, <footer>) which carry meaning for screen readers and search engines, <div> is intentionally meaningless — it is a pure layout tool that you give meaning to through id and class attributes.

Assigning an `id` to a `<div>`

The id attribute gives a <div> a unique name on the page. That name becomes the CSS selector hook:

<div id="header">This is the Header</div>
<div id="navigation">Navigation Bar</div>
<div id="main-content">Main Content Area</div>
<div id="sidebar">Sidebar with additional links</div>
<div id="footer">Footer Information</div>

Each id must be unique — no two elements on the same page should share the same id value. You reference it in CSS with the # prefix (e.g., #header).

Chapter 2: Applying Margins to `<div>` Sections

Raw stacked <div> elements touch each other edge-to-edge. Margins fix that. The CSS margin property controls the space outside an element's border — the gap between one <div> and the next.

Margin shorthand recap

Declaration	Meaning
`margin: 10px`	All four sides equal 10 px
`margin: 10px 0`	Top & bottom 10 px, left & right 0
`margin-bottom: 20px`	Bottom side only
`margin-right: 10px`	Right side only
`margin-left: 10px`	Left side only

Margin rules for a five-section layout

#header, #footer {
  margin-bottom: 20px; /* Adds space below the header and footer */
}

#navigation {
  margin: 10px 0; /* Adds vertical space above and below the navigation bar */
}

#main-content {
  margin-right: 10px; /* Adds space to the right of the main content, next to the sidebar */
}

#sidebar {
  margin-left: 10px; /* Adds space to the left of the sidebar */
}

Notice that #header and #footer share the same rule — CSS lets you comma-separate selectors so you write the declaration once. #navigation uses the two-value shorthand: 10 px vertical, 0 horizontal. #main-content and #sidebar each offset toward each other so the visual gap between them stays consistent.

Chapter 3: Building the Full Five-Section Layout

Bringing the HTML structure and CSS margin rules together produces a complete, readable page skeleton.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Community Center</title>
  <style>
    #header, #footer {
      margin-bottom: 20px;
    }

    #navigation {
      margin: 10px 0;
    }

    #main-content {
      margin-right: 10px;
    }

    #sidebar {
      margin-left: 10px;
    }
  </style>
</head>
<body>

  <div id="header">Header</div>

  <div id="navigation">Navigation</div>

  <div id="main-content">Content</div>

  <div id="sidebar">Sidebar</div>

  <div id="footer">Footer</div>

</body>
</html>

What's happening section by section:

#header — sits at the top; margin-bottom: 20px pushes the navigation bar 20 px away from it.
#navigation — margin: 10px 0 gives breathing room above and below the nav bar.
#main-content — margin-right: 10px reserves a gutter on its right edge, which is where the sidebar would visually live once you add float or flex positioning.
#sidebar — margin-left: 10px mirrors the gutter on its left edge, so the two sections don't collide.
#footer — closes the page; margin-bottom: 20px keeps anything below it from crowding up.

graph TD
  A["#header"] --> B["#navigation"]
  B --> C["#main-content  |  #sidebar"]
  C --> D["#footer"]

The five regions stack top-to-bottom by default. The sidebar sits inline with main content only once CSS layout tools (float, flexbox, or grid) are added in later lessons — at this stage they still stack, but their margins correctly space them.

Chapter 4: Why This Pattern Matters

Every real-world page layout — newspaper sites, dashboards, marketing pages — is built on this same principle: name your regions, contain your content in <div> blocks, space them with margins. CSS Grid and Flexbox (which come later in the course) don't replace <div> — they arrange collections of <div> elements. Learning to think in divisions now means those powerful layout tools will click immediately when you reach them.

Key benefits of the <div>-plus-margin pattern:

Visual separation — margins ensure no two sections collide, improving readability.
CSS targeting — id attributes give you precise CSS hooks without touching other elements.
Layout portability — the HTML skeleton stays clean; all visual decisions live in CSS, making redesigns cheaper.
Nesting — <div> elements can nest inside each other, allowing sub-sections inside any major region.

🧪 Try It Yourself

Task: Build a simple webpage layout for a local community center.

Requirements:

A #header section displaying the center's name
A #navigation bar with links: Home, About, Events, Contact
A #main-content area with a short paragraph of news or announcements
A #sidebar listing two upcoming events
A #footer with a copyright line

Apply the margin rules from Chapter 2 so each section has visible spacing from its neighbors.

Starter snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Oakwood Community Center</title>
  <style>
    /* Add your margin rules here */
    #header, #footer {
      margin-bottom: 20px;
    }
    #navigation {
      margin: 10px 0;
    }
    #main-content {
      margin-right: 10px;
    }
    #sidebar {
      margin-left: 10px;
    }
  </style>
</head>
<body>

  <div id="header">Oakwood Community Center</div>

  <div id="navigation">
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Events</a> |
    <a href="#">Contact</a>
  </div>

  <div id="main-content">
    <h2>Latest News</h2>
    <p><!-- Add announcement text here --></p>
  </div>

  <div id="sidebar">
    <h3>Upcoming Events</h3>
    <ul>
      <li><!-- Event 1 --></li>
      <li><!-- Event 2 --></li>
    </ul>
  </div>

  <div id="footer">&copy; 2026 Oakwood Community Center</div>

</body>
</html>

Success criterion: Open the file in a browser. You should see five visibly separated sections stacked vertically, with no sections pressing directly against each other.

🔍 Checkpoint Quiz

Q1. A <div> is described as a "block-level element." What does that mean in practice?

A) It is invisible by default until CSS is applied
B) It starts on a new line and expands to fill its parent's full width
C) It can only contain text, not other HTML elements
D) It shares its line with adjacent inline elements

Q2. Given this CSS:

#navigation {
  margin: 10px 0;
}

What spacing does this apply?

A) 10 px on all four sides
B) 10 px left and right, 0 top and bottom
C) 10 px top and bottom, 0 left and right
D) 10 px top only

Q3. Look at this snippet:

<div id="main-content">Content</div>
<div id="sidebar">Sidebar</div>

#main-content { margin-right: 10px; }
#sidebar { margin-left: 10px; }

What is the total pixel gap between the right edge of #main-content and the left edge of #sidebar when they are floated side by side?

A) 10 px
B) 20 px
C) 0 px — margins collapse
D) 5 px — margins average

Q4. You are designing a portfolio page and want a sticky footer that appears at the very bottom, clearly separated from the sidebar above it. Which CSS declaration on #footer best achieves the visual separation from the section above it?

A) padding-top: 20px on #footer
B) margin-bottom: 20px on #footer
C) margin-bottom: 20px on the section directly above #footer
D) Both A and C are equivalent

A1. B — Block-level elements force a new line before and after themselves and stretch horizontally to fill their parent container by default.

A2. C — The two-value shorthand margin: 10px 0 means top & bottom = 10 px, left & right = 0.

A3. B — margin-right: 10px on #main-content plus margin-left: 10px on #sidebar adds up to a combined 20 px gap between the two elements (margins between adjacent siblings do not collapse horizontally).

A4. C — Adding margin-bottom to the section above the footer pushes the footer down, creating the gap. Adding margin-bottom to the footer itself only adds space after it, not before. padding-top on #footer adds internal spacing inside the footer box, which changes its height but is not the same as separating it from the element above.

🪞 Recap

A <div> is a block-level container that starts on a new line and fills its parent's width, making it ideal for defining page regions.
Give each <div> a unique id attribute so CSS can target it precisely with the #id selector.
Use margin-bottom, margin-top, and margin: Xpx 0 to create vertical breathing room between stacked sections.
Use margin-right and margin-left on side-by-side regions (like main content and sidebar) to maintain a consistent gutter between them.
The five-section skeleton — header, navigation, main-content, sidebar, footer — is the blueprint for almost every page layout you will build.

📚 Further Reading

MDN: <div> element — the source of truth on <div> behavior and accessibility notes
MDN: CSS margin — full reference for shorthand, longhand, and margin collapsing rules
CSS-Tricks: The Box Model — visual explainer on how margin, border, and padding interact
⬅️ Previous: CSS Advance
➡️ Next: Form Submission Task