CSS Template: Two-Column Layout (25% / 75%)

📝 Use Case

This template is useful when you want to create a split layout with a 25% left sidebar and 75% right content area. Ideal for navigation + content or menu + content structures.

📘 Explanation

Using display: flex;, the elements are aligned side-by-side. flex: 0 0 25% sets the width of the left column, and flex: 1 allows the right column to take up the remaining space.

✅ Demo

Left Column (25%)

Right Column (75%)

📄 Code (partial)

<style>
.two-column-container {
  display: flex;
  gap: 1rem;
}
.left-column {
  flex: 0 0 25%;
  background-color: #f0f0f0;
  padding: 1rem;
}
.right-column {
  flex: 1;
  background-color: #ffffff;
  padding: 1rem;
  border-left: 1px solid #ccc;
}
</style>

<div class="two-column-container">
  <div class="left-column">Left Column (25%)</div>
  <div class="right-column">Right Column (75%)</div>
</div>

📦 Code (full HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Two-Column Layout Demo</title>
  <style>
    .two-column-container {
      display: flex;
      gap: 1rem;
    }
    .left-column {
      flex: 0 0 25%;
      background-color: #f0f0f0;
      padding: 1rem;
    }
    .right-column {
      flex: 1;
      background-color: #ffffff;
      padding: 1rem;
      border-left: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="two-column-container">
    <div class="left-column">Left Column (25%)</div>
    <div class="right-column">Right Column (75%)</div>
  </div>
</body>
</html>

Copied!

🧩 Tips for Application and Customization

This two-column layout is ideal for dividing content between left and right sections. Specifically, using flex: 0 0 25% allows you to fix the width of the left column while letting the right side expand flexibly. It’s perfect for sidebar + main content structures.

For mobile responsiveness, it's recommended to use media queries. For example, applying @media (max-width: 768px) with flex-direction: column; switches the layout to a vertical stack, improving usability on smaller screens.

From a styling perspective, gap naturally manages spacing between columns, making layout maintenance easier than using manual margin. Additionally, applying border-left to the right column creates a clear visual separation between sections.

🔧 Implementation Notes

Depending on the content, one column may become taller than the other. In such cases, using align-items: stretch; ensures both columns share the same height, creating a more cohesive appearance.

Overall, this template serves as a highly useful foundation for various web layouts, offering a solid base structure that can be easily customized with simple CSS enhancements.