Multiple Columns

The Newspaper Effect

Table of Contents

Multiple columns are great for organising content in newspaper style columns. They fit in wonderfully with fluid layouts because we can adjust the number of columns based on the width of the browser.

CSS3 Multiple Column Layout

Unfortunately, Microsoft have been very slow adopting multi-columns and it is not until IE10 that we see multiple column device support This means that older IE browsers will display the content as a single column, which we know can be hard to read across wide screens. What we need is a nice fall-back so that these IE browsers get an ideal reading width.

For more information, check out Multiple columns using CSS3.

Applying Multiple Columns

<!-- Markup -->
<section class="multicolumn">
  ...
</section>

Fall-back

No Multi-Column Support

To begin with, use the Modernizr JavaScript library which will feature test for multi-column support, by adding either csscolumns or no-csscolumns as a class attribute of the html element. We can now apply a high CSS-specificity rule for non-supporting browsers to ensure they display content at an ideal reading width (about 33em).

No JavaScript

If no JavaScript is available, then Modernizr would not help us. However, if we add a class-name to the root element, <html class="no-js">, then we can use it to detect if JavaScript is available. If not, the class-name no-js will remain. Otherwise, Modernizr will replace this class with js. Once again, we can apply a high CSS-specificity rule for non-JavaScript devices to achieve an ideal reading width.

This ideal reading width should not be used with widths less than 40em (640px), otherwise horizontal scrolling would be required. Columns must remain fluid (the default) up until this width. A media query will solve this for us.

Ideal reading width
@media screen and (min-width: 40em) {
  .no-csscolumns .multicolumn, .no-csscolumns .widecolumns, .no-csscolumns .elastic-cols, .no-csscolumns .single, 
   .no-js .multicolumn, .no-js .widecolumns, .no-js .elastic-cols, .no-js .single {
      width: 33em;
      margin: 0 auto;
  }
}
Increasing Column Count

Also, at the 40em (640px) point, we need to initialise the rule and gap for all widths, beginning with two columns or .multicolumn and one column for .widecolumns.

/* CSS Set up for multiple columns */
@media screen and (min-width: 40em) {
  .multicolumn, .widecolumns {
    column-rule: 1px solid #c4c8cc;
    column-gap: 40px;
    column-count: 2; /* .multicolumn will have two columns */
  }
  .widecolumns  {
    column-count: 1; /* .widecolumns will still be one column at 40em (640px) */
  }

}

The only need now is to increase the column count at varying widths, such as:

@media screen and (min-width: 60em) {
  .multicolumn {
    column-count: 3;
  }
    .widecolumns  {
    column-count: 2;
  }
}

@media screen and (min-width: 80em) {
  .multicolumn {
    column-count: 4;
  }
}

@media screen and (min-width: 100em) {
  .multicolumn {
    column-count: 5;
  }
  .widecolumns  {
    column-count: 3;
  }
}

@media screen and (min-width: 120em) {
  .multicolumn {
    column-count: 6;
  }
}

Device Testing

To appreciate the fluid layout, you will need to start testing with a supported browser.

Reduce the width of the browser as small as possible and you will have a fluid single column. The media queries will add more columns as the width increases. Most modern browsers let you zoom in and out using Ctrl+ and Ctrl- but Firefox and Opera also change the media query so that you will be able to see the column count changing across all widths. I recommend you try one of these browsers to see the effect.

Now using any IE browser < version 10 you will see an auto-centred single column set to an ideal reading width above 40em and the default fluid column below that width.

Another way to test the media queries for multiple columns is to use Firefox web developer ResizeView Responsive layouts.

Justified Alignment & Wide Columns

Notice in the above layout, the columns are wider and fully justified. The CSS for the widecolumns class was shown in the previous code snippets. Here is the code for the justified class, which can also be used on any block of content.

<!-- Markup -->
<section class="widecolumns justified">
  ...
</section>

/* Make Justified content more accessible */
.justified {
  overflow: hidden;
  text-align: justify;
}

Multi-Column List

All that is required is to wrap this ordered list in section class="multicolumn" or section class="widecolumns" block to preserve its natural order. Once again, IE<10 will display the list as a single column, maintaining accessibility. Consider multiple column listing as a progressive enhancement (If the browser can do a better job of displaying content, then let it do it). Gone are the days when we allow IE to stop progress on the web or to disallow the use of many new technologies that are with us today.

Native British Trees

  1. Alnus glutinosaAlders
  2. Apples
  3. Ashes
  4. Birches
  5. Beeches
  6. Box
    • Box (Buxus sempervirens; southern England only)
  7. Cherries and Plums
  8. Elms
  9. Hawthorns
  10. Hazels
  11. Hornbeams
  12. Hollies
  13. Junipers
  14. Lindens (Limes)
  15. Maples
    • Field Maple (Acer campestre; southern Great Britain only)
  16. Oaks
  17. Pines
  18. Poplars
  19. Rowans and Whitebeams
  20. Strawberry Tree
  21. Willows (Salix spp.; several species)
  22. Yews

Elastic Columns

For this effect, we are using a container with a class of elastic-cols, which applies the rule of column-width: 14em;.

As the width gets wider, the columns should remain consistent at 14ems. Each column will be very easy to visually scan.

The great thing about this technique is that there is no need to worry about media query boundaries. This rule can also be applied to the default mobile first style-sheet and automatically applied to any width.

The width will automatically accommodate additional columns to fit with as many 14em column widths and the 2em column gap as possible. Simplicity is often the best solution.

Additionally, a slightly wider elastic column width of 22em can also be used with a class of ideal-cols

Coding Elastic Columns

<!-- 14em Elastic Columns -->
<section class="elastic-cols">
  ...
</section>
<!-- 22em Elastic Columns -->
<p class="ideal-cols">
  ...
</p>

/* CSS */
.elastic-cols, .ideal-cols {
  column-width: 14em;
  column-gap: 2em;
  column-rule: thin dotted #ccc;
}
.ideal-cols {
  column-width: 22em;
}

Read more about fluid and responsive  Layouts.

.