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