CSS3 multiple column layouts fallback for Internet Explorer

Joris Hens

Jun 29, 2013 · 2 min read

Hi! I'm GoodBytes. Web developer, teacher and souschef.

Thanks for dropping by! I think you might like my latest app MeetMonocle.com — it makes it super easy to ask your clients for web design feedback.

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.

CSS Multiple Columns

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. CSS3 Multi-column layout support 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. Modernizr Multiple CSS Columns 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. CSS Columns 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.

« Find your dream job or internship with the Creativeskills App for iOS [discontinued]
Keep on reading
Avoid breaking of columns inside CSS3 multi-column layouts »