How to create sidebar layout html

HtmlHow-ToBeginner · 3 min read

How to Create a Sidebar Layout in HTML with CSS

To create a sidebar layout in HTML, use a div for the sidebar and another div for the main content inside a container. Use CSS Flexbox on the container to place the sidebar and content side by side, setting widths and background colors for clarity.

📐

Syntax

A sidebar layout typically uses a container div that holds two child div elements: one for the sidebar and one for the main content. CSS Flexbox is applied to the container to align these side by side.

<div class="container">: Wraps sidebar and content.
<div class="sidebar">: Holds navigation or sidebar content.
<div class="content">: Holds the main page content.

CSS uses display: flex; on the container to create a horizontal layout.

html

<div class="container">
  <div class="sidebar">Sidebar content</div>
  <div class="content">Main content</div>
</div>

<style>
.container {
  display: flex;
}
.sidebar {
  width: 250px;
  background-color: #f0f0f0;
}
.content {
  flex-grow: 1;
  background-color: #ffffff;
}
</style>

Output

A vertical sidebar on the left with gray background and main content area on the right with white background, side by side horizontally.

💻

Example

This example shows a simple sidebar layout with a fixed width sidebar and flexible main content area. The sidebar has navigation links, and the content area shows text.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Layout Example</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
      font-family: Arial, sans-serif;
    }
    .container {
      display: flex;
      height: 100vh;
    }
    .sidebar {
      width: 220px;
      background-color: #2c3e50;
      color: white;
      padding: 20px;
      box-sizing: border-box;
    }
    .sidebar a {
      color: white;
      text-decoration: none;
      display: block;
      margin: 10px 0;
    }
    .sidebar a:hover {
      text-decoration: underline;
    }
    .content {
      flex-grow: 1;
      background-color: #ecf0f1;
      padding: 20px;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <nav class="sidebar" aria-label="Sidebar navigation">
      <h2>Menu</h2>
      <a href="#home">Home</a>
      <a href="#services">Services</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
    <main class="content">
      <h1>Welcome</h1>
      <p>This is the main content area next to the sidebar.</p>
    </main>
  </div>
</body>
</html>

Output

A full browser window with a dark vertical sidebar on the left containing menu links and a light main content area on the right with a heading and paragraph.

⚠️

Common Pitfalls

Common mistakes when creating sidebar layouts include:

Not using display: flex; on the container, causing sidebar and content to stack vertically.
Setting fixed widths on both sidebar and content, which can cause overflow or horizontal scroll.
Forgetting to set box-sizing: border-box;, which can break sizing with padding.
Not making the layout responsive for smaller screens.

html

<!-- Wrong: stacking sidebar and content vertically -->
<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<style>
.container {
  /* Missing display: flex; */
}
.sidebar {
  width: 200px;
  background: #ccc;
}
.content {
  width: 600px;
  background: #eee;
}
</style>

<!-- Right: use flex to align side by side -->
<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

<style>
.container {
  display: flex;
}
.sidebar {
  width: 200px;
  background: #ccc;
  box-sizing: border-box;
}
.content {
  flex-grow: 1;
  background: #eee;
  box-sizing: border-box;
}
</style>

📊

Quick Reference

Use display: flex; on the container to create horizontal layout.
Set a fixed width for the sidebar and let content fill remaining space with flex-grow: 1;.
Apply box-sizing: border-box; to include padding in width calculations.
Use semantic elements like <nav> for sidebar and <main> for content.
Make sidebar accessible with aria-label and keyboard-friendly links.

✅

Key Takeaways

Use a container with CSS Flexbox to place sidebar and content side by side.

Give the sidebar a fixed width and let the content area expand with flex-grow.

Always include box-sizing: border-box to handle padding correctly.

Use semantic HTML elements and accessibility attributes for better structure.

Test your layout on different screen sizes for responsiveness.