a quick note on css columns

i love having the ability to use css columns in my webpages! they work like a charm for content that needs to flow however it wants to flow. my only problem these days is ie7, ie8, and ie9. so here is how i work around those guys:

first, implement the simple css:

.columns {
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    -moz-column-fill: auto;
    -webkit-column-count: 2;
    -webkit-column-gap: 40px;
    -webkit-column-fill: auto;
    column-count: 2;
    column-gap: 40px;
    column-fill: auto;
}

then, the javascript fallback, which uses columnizer.js (and jquery, too):

$(function () {
    if ($.browser.msie && $.browser.version < 10) { //ie10 supports css3 multi-columns
        $('.columns').columnize({
            columns: 2,
        });
    }
});

and that's it! ie7 may have other problems, but for this week's project i am only fixing what takes 5 seconds to fix. this week i'm working on the third site i've needed this for and, for the most part, it's working like a charm. </nerd>

UPDATE 5/28/2013
i just discovered that $.browser is no longer supported as of jQuery 1.9.1 — but thanks to a reminder from my friend, Bertine, I can still use CSS conditional comments to call the script for IE9 and below within my <head> tag, like so:

<!--[if lt IE 10]> 
<script type="text/javascript">
    $(function () { //ie10 supports css3 multi-columns
        $('.columns3').columnize({
            columns: 3,
        });
    });
</script>
<![endif]-->

Leave a Reply

Your email address will not be published. Required fields are marked *