How to create three column layout html

HtmlHow-ToBeginner · 4 min read

How to Create a Three Column Layout in HTML Easily

To create a three column layout in HTML, use a container with three child div elements and apply CSS Flexbox to arrange them side by side. Set display: flex; on the container and use flex: 1; on each column to make them equal width.

📐

Syntax

The basic structure uses a container div holding three child div elements. CSS Flexbox is applied to the container to align children horizontally.

<div class="container">: The wrapper that holds all columns.
<div class="column">: Each column inside the container.
display: flex;: Makes the container arrange children in a row.
flex: 1;: Makes each column take equal space.

html

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

<style>
  .container {
    display: flex;
  }
  .column {
    flex: 1;
    padding: 1rem;
    border: 1px solid #ccc;
  }
</style>

Output

Three equal columns side by side with borders and padding inside a container.

💻

Example

This example shows a complete three column layout with simple styling. The columns share equal width and have some padding and border for clarity.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Three Column Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 2rem;
    }
    .container {
      display: flex;
      gap: 1rem;
    }
    .column {
      flex: 1;
      padding: 1rem;
      border: 2px solid #007acc;
      background-color: #e6f2ff;
      text-align: center;
      font-weight: bold;
      color: #004a99;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</body>
</html>

Output

A webpage showing three equally wide blue tinted columns side by side with text "Column 1", "Column 2", and "Column 3" centered in each.

⚠️

Common Pitfalls

Common mistakes when creating a three column layout include:

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

Always test your layout on different screen sizes to ensure it stays usable.

html

<!-- Wrong: No flex on container -->
<div class="container">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

<style>
  .container {
    /* Missing display: flex; */
  }
  .column {
    flex: 1;
    border: 1px solid black;
  }
</style>

<!-- Right: Add display flex -->
<style>
  .container {
    display: flex;
  }
</style>

📊

Quick Reference

Tips for creating three column layouts:

Use display: flex; on the container for horizontal layout.
Set flex: 1; on each column for equal width.
Add gap on container for spacing between columns.
Use box-sizing: border-box; to include padding and border in width.
Test responsiveness by resizing the browser window.

✅

Key Takeaways

Use CSS Flexbox with display: flex on the container to create horizontal columns.

Apply flex: 1 to each column to make them equal width automatically.

Add gap on the container to space columns without extra margins.

Remember box-sizing: border-box to avoid size issues with padding and borders.

Test your layout on different screen sizes for responsiveness.