How to Create: Two-column Layout

How to Create a Two-column Layout

Step 1 - Add HTML:

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

Step 2 - Add CSS:

In this example, we will create twoEqual widthcolumns:

Float Example

.column {
  float: left;
  width: 50%;
}
/* Clear float after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Try It Yourself

The modern way to create a two-column layout is to use CSS Flexbox. However, it is not supported by Internet Explorer 10 and earlier versions.

Flex Example

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Try It Yourself

You can choose to use float or flex to create a two-column layout. However, if you need to support IE10 and earlier versions, you should use float.

Tip:For more information about the Flexible Box Layout Module, please read our CSS Flexbox Tutorial.

In this example, we will create two columns of unequal width:

Example

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Try It Yourself

In this example, we will create aResponsiveTwo-column layout:

Example

/* Responsive layout - When the screen width is less than 600px, stack the two columns instead of displaying them side by side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Try It Yourself

Related Pages

Tutorial:CSS Website Layout

Tutorial:CSS Responsive Web Design