How to create: Three-column layout

How to create a three-column layout

First step - Add HTML:

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

Second step - Add CSS:

In this example, we will create threeEqual widthColumns:

Example

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

Try it yourself

In this example, we will create threeUnequal widthColumns:

Example

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

Try it yourself

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

Example

/* Responsive layout - When the screen width is less than 600px, stack the three 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