CSS3 columns in Internet Explorer 7, 8 and 9

Maybe you already know that CSS3 enables texts to be rendered and flowed automatically in columns in order to obtain a newspaper-like formatting of texts. Just like so:

The CSS for this is extremely simple:

.column {
    -moz-column-count: 5;
    -moz-column-gap: 20px;
    -ms-column-count: 5;
    -ms-column-gap: 20px;
    -webkit-column-count: 5;
    -webkit-column-gap: 20px;
    column-count: 5;
    column-gap: 20px;
}

In the above CSS, column-count expresses the number of columns the text should be flowed into, and the column-gap expresses the number of pixels between each column.

This approach is extremely simple, and everything would be sweet and wonderful – if it weren’t for the fact that this doesn’t work in Internet explorer 7, 8 or 9. It works fine in IE10, Chrome, Safari and Firefox, but sadly people are still using IE 8 and 9, so we need to accommodate these poor souls.

Luckily, there is a workaround. You can use the following JavaScript-file to obtain exactly the same behavior in Explorer: http://www.csscripting.com/css-multi-column/.

However, if you use just this script, you will get into trouble. It doesn’t work in IE8, and the following blog post explains why: http://blog.gabrielsaldana.org/css3-columns-in-internet-explorer-and-other-unsupported-browsers/. Gabriel Saldaña has created a fix, and you can download it from his blog: Download fix for CSS3 multiple column script

Now, you just link to this script AFTER you include your CSS-file. Just like so:

    <link rel="stylesheet" href="/twitterbootstrap/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="/twitterbootstrap/css/main.css">
    <link href="/twitterbootstrap/css/bleau-megamenu-stylesheet.css" rel="stylesheet" type="text/css" media="screen" />

        <!--[if lt IE 10]>
          <script src="TwitterBootstrap/navigation/js/css3-multi-column.js"></script>
        <![endif]-->

The script is loaded if the browser is an Internet Explorer that is older than IE10. It will automatically parse all CSS-files, and find the relevant CSS. It will tweak your HTML in order to obtain the CSS3 column functionality. Please observe, that you have to use an external CSS-file – the script is not able to parse inline CSS.

I normally don’t like to tweak HTML-output like this – by using JavaScript after the browser has loaded all HTML and CSS. I don’t like the “flickering” that appears when the JavaScript is executed in the browser. However, if you look at the browser stats, you will notice that the usage of Internet Explorer 8 and 9 is declining, while the usage of more modern browsers are on the rise. Internet Explorer 10 is included in this. Developing for the modern browsers, while making sure that people with older browsers can still use the site, is a fine approach by me.

Thanks to Cédric Savarese for creating the original JavaScript and Gabriel Saldaña for creating and sharing a patch that works like a charm. People like those makes it so much easier to be a web developer.