Creating a Two-Column Layout

A two-column layout is one of the most common web design patterns, often used to display a narrow sidebar menu next to a wide main content area. We can easily create this using CSS Flexbox.

Historically, developers used complex CSS properties like float to achieve this. Today, using display: flex is the modern, robust, and easiest method.

The HTML Structure

First, wrap your two columns in a parent div container:

Using Flex Proportions

After we apply display: flex to the container, we use the flex property on the children to tell them how much of the available horizontal space they should inherit.

If we want the right column to be three times as wide as the left column, we can give the left column flex: 1 and the right column flex: 3:

Making it Responsive

Sidebars usually don't fit well on mobile devices. Using a media query, we can change the flex-direction to column when the screen size is small. This stacks the sidebar neatly on top of (or below) the main content:

Here, we use a breakpoint of 576px, which is a common breakpoint for mobile devices. However, you can change this value to whatever you need it to be. A common breakpoint for tablets is 768px and a common breakpoint for desktops is 1024px.

Full Working Example

Below is a fully styled two-column layout. Resize your browser window below 576 pixels to see the sidebar pop to the top, collapsing the layout into a mobile-friendly single column:

<!DOCTYPE html>
<html>
<head>
<title>Two-Column Layout Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
  }
  
  .layout-container {
    display: flex; /* Establish the flex container */
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden; /* Prevent children from breaking border radius */
  }

.sidebar {
    flex: 1; /* Takes up 1 part of the available space */
    background-color: #343a40;
    color: white;
    padding: 30px;
  }

.main-content {
    flex: 3; /* Takes up 3 parts of the available space (making it 3 times wider) */
    padding: 30px;
  }

.sidebar ul {
    list-style: none;
    padding: 0;
  }

.sidebar ul li a {
    color: #adb5bd;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #495057;
  }

/* Responsive layout: stack columns on mobile */
  @media (max-width: 576px) { /* 576px is a common breakpoint for mobile devices. However, you can change this value to whatever you need it to be. A common breakpoint for tablets is 768px and a common breakpoint for desktops is 1024px. */
    .layout-container {
      flex-direction: column;
    }
    
    .sidebar, .main-content {
      width: 100%; /* Ensure full width when stacked */
    }
  }
</style>
</head>
<body>

<div class="layout-container">
  
  
  <div class="sidebar">
    <h3>Categories</h3>
    <ul>
      <li><a href="#">Technology</a></li>
      <li><a href="#">Design</a></li>
      <li><a href="#">Business</a></li>
      <li><a href="#">Marketing</a></li>
    </ul>
  </div>

<div class="main-content">
    <h2>Main Content Area</h2>
    <p>This layout uses CSS Flexbox. The sidebar takes up a 1/4th of the width using <code>flex: 1;</code>, while this main content area takes up 3/4ths of the width using <code>flex: 3;</code>.</p>
    <p>When viewed on a smaller screen, a media query changes the flex direction to column, neatly stacking the sidebar above the main content.</p>
  </div>

</div>

</body>
</html>

View Output Full Screen Preview

The above example uses a breakpoint of 576px so that you see the full effect when viewing in the (narrow) editor/preview window (after clicking the button to view the example). As mentioned, you can change this value to whatever you need it to be.