CSS3 multiple column layouts fallback for Internet Explorer

The CSS3 Multi-column Layout Module gives us a very easy way to create, well, multi-column layouts. This is especially useful when you have a longer piece of content that you want to show in a grid-like fashion.

Browser Support

Browser support is pretty decent as you can see on the screenshot below. The only worrying browsers for me were IE8 and IE9. You typically will be writing your code with prefixes for mozilla and webkit browsers like this:

-moz-column-count:3; 
-webkit-column-count:3; 
column-count:3; 
-moz-column-gap:40px; 
-webkit-column-gap:40px; 
column-gap:40px; 

Browsers that do not support these properties like Internet Explorer 8 or 9 (and below of course) will simply display your content in one single column which isn't that bad at all.

Providing a simple fallback

It's pretty easy to provide a fallback for IE8 and the likes by detecting support for multiple columns by using Modernizr. Just create a custom build if you only want to detect support for multiple columns and make sure to let Modernizr add css classes to your html. After loading Modernizr in your page, the library will add a "no-csscolumns" or a "csscolumns" class to your html tag, which is key to creating a simple CSS fallback. What I did is probably not the cleanest solution out there, but I wanted to be able to control which content went in a specific column so I simply created

tags in my content, that allow the content to be displayed in multiple columns, even when the CSS column-count property is not supported. My CSS looks somewhat like this:

.no-csscolumns div.column 
{ 
  width: 45%; 
  float: left; 
  padding-left: 2.5%; 
  padding-right: 2.5%; 
} 

This results in the content being displayed in two columns. Of course, you can choose any fallback layout you want. Simple, yet effective.