Three Column

Two's company, three's a crowd!

Table of Contents

This is just an extension of the  Two-Column layout. Once again, treat this as a normal three-column web site where you need to judge how much and what kind of content to place into each column.

Three-Column Layout

Primary

This layout would be ideal for when we need three columns of related content.

The content will not flow into each column in the same way as  Multiple Columns.

Additional

Additional styling can be applied to any of the columns.

Three Column CSS Table Code

Structure

Any block-level elements will suffice. It is the class names that are important.

<!-- Structure -->
<section class="css-table">
  <section class="col one">
    Primary
  </section>
  <aside class="col two">
    Related
  </aside>
  <section class="col three">
    Additional
  </section>
</section>
Presentation
@media screen and (min-width: 40em) {
  .css-table {
    width: 100%;
    display: table;
  }
  .col {
    display: table-cell;
  }

  .one {
    width: 60%; /* Most important content */
  }
  .two, .three {
    display: block; /* Over-ride table-cell setting forces two columns */
  }
}

@media screen and (min-width: 60em) {
  .one {
    width:44%; /* Most important content */
  }
  .two, .three {
    display: table-cell; /* Reset to give three columns */
  }
}
Compatibility

If legacy IE support is required, in the IE only stylesheet, target these ancient browsers to float the columns instead.


.css-table { /* Over-ride parent to be an inline container */ 
  *width: auto;
  *display: inline; 
}

.col{ /* Float all columns to the left */ 
  *float: left;
  *width: 24%; 
  *display: inline;
}

Testing Responsive Design

Focus

The design is focused on keeping the primary content the most important.

Take Care

Remember, three columns or more start to look over-crowded.
Use with care.

Read more about fluid and responsive  Layouts.

.