How to create two column layout html

HtmlHow-ToBeginner · 3 min read

How to Create a Two Column Layout in HTML Easily

To create a two column layout in HTML, use a container with display: flex; in CSS and place two child elements inside it. Each child will become a column side by side, and you can control their width with CSS properties like flex or width.

📐

Syntax

Use a container element with display: flex; to arrange child elements horizontally. Each child element inside the container becomes a column.

display: flex; makes the container a flexbox.
Child elements inside the container become flex items.
flex: 1; on children makes columns share space equally.

html

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<style>
  .container {
    display: flex;
  }
  .column {
    flex: 1;
  }
</style>

Output

Two columns side by side with equal width labeled 'Column 1' and 'Column 2'.

💻

Example

This example shows a simple two column layout using HTML and CSS Flexbox. The columns share the container width equally and have some padding and background color for clarity.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Column Layout Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      display: flex;
      gap: 20px;
    }
    .column {
      flex: 1;
      padding: 20px;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">This is the first column.</div>
    <div class="column">This is the second column.</div>
  </div>
</body>
</html>

Output

A webpage showing two side-by-side boxes labeled 'This is the first column.' and 'This is the second column.' with light gray backgrounds and spacing between them.

⚠️

Common Pitfalls

Common mistakes when creating two column layouts include:

Not setting display: flex; on the container, so columns stack vertically.
Forgetting to set widths or flex properties on columns, causing uneven or collapsed columns.
Using fixed widths without considering responsiveness, which breaks layout on small screens.
Not adding box-sizing: border-box; which can cause padding and borders to increase column size unexpectedly.

html

<!-- Wrong: Missing display flex -->
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<style>
  .container {
    /* display: flex;  <-- missing */
  }
  .column {
    flex: 1;
  }
</style>

<!-- Right: Added display flex -->
<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

<style>
  .container {
    display: flex;
  }
  .column {
    flex: 1;
    box-sizing: border-box;
  }
</style>

Output

Wrong example: columns stack vertically. Right example: columns appear side by side equally.

📊

Quick Reference

Tips for creating two column layouts:

Use display: flex; on the container.
Set flex: 1; on columns for equal width.
Add gap on container for spacing between columns.
Use box-sizing: border-box; to include padding and border in width.
Test on different screen sizes for responsiveness.

✅

Key Takeaways

Use CSS Flexbox with display: flex on a container to create side-by-side columns.

Set flex: 1 on child elements to make columns share space equally.

Always include box-sizing: border-box to avoid sizing issues with padding and borders.

Add gap on the container to create space between columns easily.

Test your layout on different screen sizes to ensure it stays responsive.