CSS Two Column Layout

Posted on In

Very Simple CSS two-column layout using flexbox.

Flexbox can be used to create two-column layouts, splitting a container into two equal or unequal sections.
This example demonstrates a simple two-column layout using HTML and CSS. The left column contains a menu, while the right column displays the main content. The layout is responsive and adjusts to different screen sizes.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<div class="container">
  <div class="left-column">
    <ul class="menu">
      <li class="menu-item"><a href="#">Menu Item 1</a></li>
      <li class="menu-item"><a href="#">Menu Item 2</a></li>
      <li class="menu-item"><a href="#">Menu Item 3</a></li>
    </ul>
  </div>
  <div class="right-column">
    <h1>This is the main content!</div>
  </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
  height: 100vh; /* Full screen height */
}

.left-column {
  width: 250px; /* Fixed width for left column */
  padding: 20px;
  background-color: #f0f0f0;
}

.right-column {
  flex: 1; /* Takes remaining space */
  padding: 20px;
  background-color: #dcdcdc;
}

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .left-column {
    width: 100%; /* Make full width on smaller screens */
  }
}

Preview:

Conclusion

This simple two-column layout is a great starting point for building more complex web pages. You can easily customize the styles, add more content, and enhance the design to fit your needs. Flexbox makes it easy to create responsive layouts that adapt to different screen sizes, ensuring a seamless user experience across devices.