CSS Website Layout

Imagine building a physical display cabinet for your shop. If you just stack items loose, they will look cluttered. You want to frame the cabinet: add a top banner (header), a side drawer for directories (sidebar), a main display zone (content), and a bottom compartment for legal info (footer). A CSS website layout is that display cabinet. It uses semantic containers, flex columns, and grid rows to organize your webpage content into clean, structured zones.

In this page:

The Semantic Page Outline
Two-Column Flexbox Layouts
Responsive Grid Cards
Persistent Header App Frames
Responsive Media Query Reflows

The Semantic Page Outline

A professional website starts with a semantic HTML structure. Using semantic layout tags (like header, footer, main, and nav) defines clear page zones for search engines and assistive devices.

Note: Always wrap your page's unique, core topic inside a single, clean main tag to help search engines index your page.

Warning: Never use multiple main tags on a single webpage to prevent validation errors.

Example: The Semantic Page Outline

css

<style>
header, nav, main, footer {
  padding: 12px;
  color: white;
}
header { background: steelblue; }
nav { background: seagreen; }
main { background: #555; }
footer { background: #333; }
</style>
<header>Site Header</header>
<nav>Navigation</nav>
<main>
  <p>Main content</p>
</main>
<footer>Site Footer</footer>

Two-Column Flexbox Layouts

To arrange your main content area and a sidebar column side-by-side, you can use a flexible Flexbox container. This allows the sidebar to maintain a fixed width while the content area expands to fill the remaining screen space.

Note: Use Flexbox layouts to align your columns and center them both vertically and horizontally.

Warning: Apply your flex properties to the parent container, not to the columns themselves, to ensure correct alignment.

Example: Two-Column Flexbox Layouts

css

<style>
.layout {
  display: flex;
}
.sidebar {
  width: 200px;
  background: steelblue;
  color: white;
  padding: 10px;
}
.content {
  flex: 1;
  background: #eef;
  padding: 10px;
}
</style>
<div class="layout">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main content area</div>
</div>

Responsive Grid Cards

To display lists of tools or content cards cleanly, you can use a responsive CSS Grid. By using the auto-fit and minmax() functions, you can build self-responsive grids that wrap cards onto new lines automatically as screen sizes shrink.

Note: Combine repeat(), auto-fit, and minmax() to build self-responsive card grids that do not require any media queries.

Warning: If your minmax minimum value is too large, your columns can still overflow on smaller mobile screens.

Example: Responsive Grid Cards

css

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.cards div {
  background: mediumseagreen;
  color: white;
  padding: 16px;
}
</style>
<div class="cards">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

Persistent Header App Frames

To make your web applications feel like native mobile apps, you can use fixed positioning to lock your header bar at the top of the screen and your footer navigation menu at the bottom, keeping them visible as users scroll.

Note: Add matching top and bottom padding to your body container to prevent the fixed bars from covering your content.

Warning: Make sure your fixed headers are responsive so they do not cover too much screen space on mobile devices.

Example: Persistent Header App Frames

css

<style>
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: steelblue;
  color: white;
  padding: 10px;
  text-align: center;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
body {
  padding-top: 50px;
  padding-bottom: 50px;
}
.content p {
  background: #f0f0f0;
  padding: 12px;
  margin: 10px 0;
}
</style>
<header>Fixed Header</header>
<div class="content">
  <p>Scroll to see the header and footer stay fixed. Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <p>Paragraph 4.</p>
  <p>Paragraph 5.</p>
  <p>Paragraph 6.</p>
  <p>Paragraph 7.</p>
  <p>Paragraph 8.</p>
</div>
<footer>Fixed Footer</footer>

Responsive Media Query Reflows

To ensure your website layout is responsive, use CSS media queries to adapt and stack elements automatically when viewed on smaller mobile displays, swoping side-by-side columns into single vertical columns.

Note: Use a mobile-first design workflow by writing default styles for small mobile screens, then using min-width queries to adapt for larger monitors.

Warning: Ensure your breakpoints do not leave visual layout gaps where elements overlap on unusual screen sizes.

Example: Responsive Media Query Reflows

css

<style>
.columns {
  display: flex;
  gap: 8px;
}
@media (max-width: 600px) {
  .columns {
    flex-direction: column;
  }
}
.columns div {
  background: steelblue;
  color: white;
  padding: 10px;
  flex: 1;
}
</style>
<div class="columns">
  <div>Column A</div>
  <div>Column B</div>
</div>

Common Mistakes

Using standard HTML element tags for global styling instead of using semantic layout tags.
Forgetting to add top padding to the body container when using a fixed top navigation bar, causing content cutoff.
Using positive tabindex values (like tabindex="1"), which disrupts the logical tab navigation flow.

Chapter Summary

Semantic HTML tags (like header, footer, and nav) serve as layout landmarks on your webpage.
Align sidebars and content containers side-by-side cleanly using Flexbox, and group cards using responsive CSS Grids.
Keep layouts responsive using CSS media queries to adapt and stack elements on smaller mobile displays.

Browser Support

Standard webpage layout tags, Flexbox displays, and CSS Grid systems are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson CSS Outline Next Lesson → CSS Gap