How To Create A Two Column Layout Example

<!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>