Topic 6: DIV - Page Design

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

Why this matters

Picture this: you open a blank HTML file and just start typing — headings, text, images, all piled on top of each other with no separation. It looks like a wall of content with no breathing room, no layout, no sense of where one section ends and another begins. That's where <div> comes in. It's the most humble tag in HTML, just a plain box with no visual style of its own — but it's the reason every webpage you've ever seen has columns, cards, headers, and footers. Once you understand <div>, you stop writing content and start designing pages.

What You'll Learn

• What a <div> element is and why it behaves as a block-level element
• How to use id-attributed <div> sections to create distinct page regions (header, navigation, main content, sidebar, footer)
• How to apply CSS margins to control spacing between <div> sections
• How to combine structural <div> tags and margin rules into a complete basic page layout

The Analogy

Think of <div> tags as the cardboard boxes you use when moving house. Before packing, everything is jumbled on the floor — clothes, books, kitchen tools. Once you sort items into labelled boxes, each box has a purpose, a boundary, and can be stacked or placed wherever it needs to go. A webpage without <div> tags is that jumbled floor. Add <div> tags and suddenly you have a header box, a navigation box, a content box, a sidebar box, and a footer box — each living in its own clearly defined space, easy to move or restyle without disturbing the others.

Chapter 1: What Is a <div> and Why Does It Matter?

A <div> (short for division) is a generic, block-level HTML container element. Two key behaviors define it:

• Block-level: A <div> automatically begins on a new line. It does not share its horizontal row with sibling elements by default.
• Full-width stretch: It expands as wide as its parent container allows — left edge to right edge — unless its width is constrained by CSS.

These two properties make <div> ideal for carving a page into horizontal bands, each band representing a distinct region of content.

<div> elements carry no visual style of their own. They are invisible scaffolding — pure structure — until CSS is applied.

Chapter 2: Standard Page Regions with <div id="">

The most readable way to label a <div> for a unique, one-per-page region is the id attribute. A page commonly needs these five regions:

<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 value is a unique name the browser and your CSS can target precisely. Conventions like header, navigation, main-content, sidebar, and footer are self-documenting — any developer reading the markup immediately understands the page's information architecture.

graph TD
    PAGE[Page]
    PAGE --> H[div#header]
    PAGE --> N[div#navigation]
    PAGE --> MC[div#main-content]
    PAGE --> SB[div#sidebar]
    PAGE --> F[div#footer]

Chapter 3: Applying Margins to <div> Sections

Margins control the transparent space outside an element's border. Without margins, adjacent <div> blocks stack flush against each other — no breathing room, no visual separation. Adding targeted margins to each region keeps the layout clean and readable.

#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 */
}

Breaking down the shorthand:

The main-content and sidebar margins mirror each other: content pushes 10 px right, sidebar pushes 10 px left, creating a consistent gutter between the two columns.

Chapter 4: Putting It Together — A Complete Basic Layout

Combine the structural HTML and the margin CSS into a single working document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Page Layout</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>

Each <div> represents a different area of the webpage. The margins ensure that these areas do not touch each other directly, improving visual separation and overall readability. No two regions bleed into each other — every box has its own clearly defined space on the floor plan.

🧪 Try It Yourself

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

Create an HTML file with the following five <div> sections:

1. #header — the community center name
2. #navigation — links: Home, About, Events, Contact
3. #main-content — a short news or announcements paragraph
4. #sidebar — a list of three upcoming events
5. #footer — copyright and address line

Apply the same margin rules from Chapter 3 so each section is visually distinct and well-spaced.

Starter snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Riverside 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">Riverside Community Center</div>

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

  <div id="main-content">
    <p>Welcome! Join us this weekend for the annual spring fair.</p>
  </div>

  <div id="sidebar">
    <p>Upcoming Events:</p>
    <ul>
      <li>May 24 – Spring Fair</li>
      <li>Jun 1 – Yoga in the Park</li>
      <li>Jun 8 – Book Club</li>
    </ul>
  </div>

  <div id="footer">© 2026 Riverside Community Center · 123 Main St</div>

</body>
</html>

Success criterion: Open the file in a browser. You should see five visually separated horizontal bands with clear gaps between them — no two sections touching flush.

🔍 Checkpoint Quiz

Q1. Why is <div> described as a block-level element?

A) It can only contain text, not other HTML elements
B) It automatically starts on a new line and stretches to fill its parent's width
C) It is invisible and has no effect on page layout
D) It shares its horizontal row with inline elements by default

Q2. Given the following CSS, how much space appears below the #header div?

#header, #footer {
  margin-bottom: 20px;
}
#navigation {
  margin: 10px 0;
}

A) 10 px
B) 30 px
C) 20 px
D) 0 px

Q3. What is the bug in the snippet below — the sidebar and main content appear to overlap with no gutter between them?

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

A) Both rules use margin-left — to create a gutter, #main-content should use margin-right: 10px instead
B) The pixel value is too small; it needs to be at least 50 px
C) margin-left is not a valid CSS property
D) The #sidebar rule should be removed entirely

Q4. How would you adapt this layout to add a second sidebar on the right side of the main content, keeping a 10 px gutter on both sides?

A1. B — Block-level elements start on a new line and expand to fill the available horizontal width of their parent container by default.

A2. C — The margin-bottom: 20px rule applies to #header. The #navigation rule adds 10 px above and below the navigation, not below the header.

A3. A — Both divs push space to the left, which does not create a gap between them. The correct approach mirrors the margins: #main-content gets margin-right: 10px (space on its right edge) and #sidebar gets margin-left: 10px (space on its left edge), together forming a 20 px gutter.

A4. Add a <div id="sidebar-right"> after #main-content in the HTML, then add #sidebar-right { margin-left: 10px; } in CSS so the new sidebar has a 10 px gap to its left. Adjust #main-content to also use margin-left: 10px if a left sidebar remains, keeping symmetric gutters.

🪞 Recap

• A <div> is a block-level container that starts on a new line and stretches to fill its parent's width.
• Assigning a unique id to each <div> (e.g., header, navigation, main-content, sidebar, footer) names the page's structural regions.
• CSS margins control the transparent space outside an element and prevent adjacent <div> sections from touching flush.
• The margin shorthand 10px 0 applies 10 px vertically and 0 horizontally; long-form properties like margin-right and margin-left target individual sides.
• Combining structural <div> tags with targeted margins produces a clean, readable basic page layout without any advanced CSS.

📚 Further Reading

• MDN Web Docs — <div> element — the authoritative reference for div behavior and accessibility notes
• MDN Web Docs — CSS margin — full margin shorthand syntax and collapsing rules explained
• CSS-Tricks — The CSS Box Model — visual walkthrough of margin, border, padding, and content
• ⬅️ Previous: CSS Advance
• ➡️ Next: JavaScript Validation