How TO - Two Column Layout

Learn how to create a 2-column layout grid with CSS.

Column 1

Some text..

Column 2

Some text..

How To Create a Two Column Layout

Step 1) Add HTML:

Example

  <div class="row">
  <div class="column"></div>
  <div
  class="column"></div>
</div>

Step 2) Add CSS:

In this example, we will create two equal columns:

Float Example

  .column {
 
  float: left;
  width: 50%;
}

/* Clear floats after the
  columns */
.row:after {
  content: "";
 
  display: table;
  clear: both;
}

A modern way of creating two columns, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions.

Flex Example

    .row {
 
    display: flex;
}

.column {
  flex: 50%;
}

It is up to you if you want to use floats or flex to create a two-column layout. However, if you need support for IE10 and down, you should use float. Tip: To learn more about the Flexible Box Layout Module, read the CSS Flexbox chapter.

In this example, we will create two unequal columns:

Example

  .column {
  float: left;
}

.left {
  width: 25%;

  }

.right {
  width: 75%;
}

In this example, we will create a responsive two column layout:

Example

  /* Responsive layout - when the screen is less than 600px wide, make the two
  columns stack on top of each other instead of next to each other */
@media
  screen and (max-width: 600px) {
  .column {
    width: 100%;

    }
}

Tip: Go to the CSS Website Layout Tutorial to learn more about website layouts.

Tip: Go to the CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.