How to create: four-column layout

How to create a four-column layout

First step - Add HTML:

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

Second step - Add CSS:

In this example, we will create a four-column layout:

Example

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

Try it yourself

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

Example

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