Sidebar Layout in CSS

From the CSS Flexbox cheat sheet · Common Patterns · verified Jul 2026

Sidebar Layout

Classic two-column layout with fixed sidebar and flexible main content area

css
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}
html
<div class="layout">
  <aside class="sidebar">
    <h3>Sidebar</h3>
    <nav>Navigation</nav>
  </aside>
  <main class="main">
    <h1>Main Content</h1>
    <p>Content goes here...</p>
  </main>
</div>
📐 Classic sidebar pattern
💡 Fixed sidebar width
📱 Stack on mobile

More CSS tasks

Back to the full CSS Flexbox cheat sheet