Tag Archives: column-count

code

Cross browser multi-columns with JQuery and CSS3

2 Comments

column-count was proposed in January 2001, candidate in December 2009. It’s supported in WebKit and Mozilla via extensions and Opera directly, but it’s not in IE9. Y U no support columns IE9? That’s OK, we can work around this with columnizer:

 
if ($.browser.msie && $.browser.version < 10) { // am I a hopeless romantic for assuming that IE10 will support it?
        $('.multicolumn').columnize({
            width: 600,
            columns: 3
        });
    }
 
 
/* Support for Webkit, Mozilla, Opera */
div#multicolumn, .multicolumn {
        -moz-column-count: 3;
        -moz-column-gap: 20px;
        -webkit-column-count: 3;
        -webkit-column-gap: 20px;
        column-count: 3;
        column-gap: 20px;
        width:600px;
}