CssHow-ToBeginner · 4 min read

How to Create Sidebar in CSS: Simple Steps and Example

To create a sidebar in CSS, use a div with fixed or flexible width and position it using position or flexbox. Style it with background color and height to make it visible and separate from the main content.

📐

Syntax

A sidebar is usually a div element styled with CSS properties like width, height, background-color, and position. You can use position: fixed to keep it visible on scroll or flexbox to place it beside the main content.

Key parts:

width: sets the sidebar's width.
height: usually 100% of viewport height.
background-color: to visually separate sidebar.
position: fixed or relative depending on layout.
flexbox: for side-by-side layout with main content.

css

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

.sidebar {
  width: 250px;
  height: 100vh; /* full viewport height */
  background-color: #333;
  color: white;
  position: fixed; /* stays in place when scrolling */
  top: 0;
  left: 0;
  padding: 1rem;
}

💻

Example

This example shows a fixed sidebar on the left and main content on the right. The sidebar stays visible when you scroll the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sidebar Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .sidebar {
    width: 250px;
    height: 100vh;
    background-color: #2c3e50;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    padding: 1rem;
    box-sizing: border-box;
  }
  .main {
    margin-left: 250px; /* same as sidebar width */
    padding: 1rem;
  }
</style>
</head>
<body>
  <div class="sidebar">
    <h2>Sidebar</h2>
    <p>Links or menu here</p>
  </div>
  <div class="main">
    <h1>Main Content</h1>
    <p>This is the main area next to the sidebar.</p>
    <p>Scroll down to see the sidebar stay fixed.</p>
    <p style="margin-top: 1000px;">End of content.</p>
  </div>
</body>
</html>

Output

A webpage with a dark vertical sidebar fixed on the left side of the screen and white main content area on the right. The sidebar stays visible when scrolling the page.

⚠️

Common Pitfalls

Common mistakes when creating sidebars include:

Not setting height to 100% viewport height, so sidebar doesn't fill the side.
Forgetting to add left margin or padding to main content, causing it to be hidden behind the sidebar.
Using position: absolute without proper offsets, making sidebar overlap or disappear on scroll.
Not using box-sizing: border-box, which can cause width issues with padding.

css

<!-- Wrong: main content hidden behind sidebar -->
<style>
  .sidebar {
    width: 200px;
    height: 100vh;
    background: #444;
    position: fixed;
    top: 0;
    left: 0;
  }
  .main {
    padding: 1rem;
    /* missing margin-left */
  }
</style>

<!-- Right: add margin-left to main -->
<style>
  .main {
    margin-left: 200px;
    padding: 1rem;
  }
</style>

📊

Quick Reference

Tips for creating sidebars in CSS:

Use position: fixed for a sidebar that stays on screen while scrolling.
Set height: 100vh to fill full viewport height.
Use margin-left on main content equal to sidebar width to avoid overlap.
Consider flexbox for responsive sidebars that adjust with screen size.
Always test on different screen sizes for responsiveness.

✅

Key Takeaways

Use a fixed width and height with position fixed to create a visible sidebar.

Add margin to main content equal to sidebar width to prevent overlap.

Set height to 100vh so sidebar fills the full height of the screen.

Avoid position absolute without offsets to keep sidebar visible on scroll.

Use flexbox for flexible, responsive sidebar layouts.