CSS Website Layout

CSS Website Layout

A website layout defines how the main parts of a page are arranged, such as header, navigation, content, sidebar, and footer. Modern layouts are commonly built using Flexbox or CSS Grid.

In this lesson, you will see a simple, practical layout structure and how to make it responsive.

Basic Layout Structure

A typical page structure looks like this:

<header class="site-header">Header</header>

<nav class="site-nav">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#">Blog</a>
</nav>

<div class="layout">
  <main class="content">Main Content</main>
  <aside class="sidebar">Sidebar</aside>
</div>

<footer class="site-footer">Footer</footer>

Layout with Flexbox

Flexbox is an easy way to create a two-column layout (content + sidebar).

.layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.content {
  flex: 1;
  min-width: 0;
}

.sidebar {
  width: 280px;
}

flex: 1 makes the content area take remaining space, while the sidebar stays fixed width.

Header and Footer Styling

.site-header,
.site-footer {
  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.site-header {
  margin-bottom: 12px;
}

.site-footer {
  margin-top: 12px;
}

Navigation Styling

A simple horizontal navigation bar:

.site-nav {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 16px;
}

.site-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #222;
}

.site-nav a:hover {
  background: #eef3ff;
  color: #1f4bd8;
}

Responsive Layout

On smaller screens, a two-column layout often becomes a single column. Use a media query to stack items.

@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

This makes the sidebar move below the content on small screens.

Max-width Container

A centered container improves readability on large screens.

.page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

Code Challenge

Goal: Build a responsive website layout with header, nav, content, sidebar, and footer.

HTML:

<div class="page">
  <header class="site-header">My Site</header>

  <nav class="site-nav">
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">About</a>
  </nav>

  <div class="layout">
    <main class="content">
      <h3>Main Content</h3>
      <p>This is the main area.</p>
    </main>

    <aside class="sidebar">
      <h4>Sidebar</h4>
      <p>Links and extras.</p>
    </aside>
  </div>

  <footer class="site-footer">Footer</footer>
</div>

Task:

• Center the page with a max-width container
• Create a two-column layout using Flexbox
• Style nav links with hover effects
• Make the layout stack on smaller screens

Try a Solution:

.page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

.site-header,
.site-footer {
  padding: 14px 16px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.site-nav {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin: 12px 0 16px;
}

.site-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: #222;
}

.site-nav a:hover {
  background: #eef3ff;
  color: #1f4bd8;
}

.layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.content {
  flex: 1;
  min-width: 0;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
}

.sidebar {
  width: 280px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 12px;
}

@media (max-width: 900px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }
}

What’s Next?

You have completed the CSS Tutorial section. Next, you can continue with more advanced CSS topics or start building real UI components and examples.