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;
}

2 thoughts on “Cross browser multi-columns with JQuery and CSS3”

  1. Produces strange results with ordered lists in IE8 and below. Will do 1 2 3 4, next column, 1 2 3 4, rather than 1 2 3 4 5 6 7 8. In IE6, it falls back to bullets, which is a better if still not optimal behavior. Without total IE support, I don’t really see the point.

    Reply

  2. Tried the plugin, did not work at all on an unordered list in IE9. So i came up with a better solution : use conditional comments to add a second UL :

    Then just add via CSS .lt-ie10 ul { float: left,; width: 50%; }
    does the job perfectly wihtout adding too many plugins to load.

    .lt-ie10 => i added this class with a conditional comment too.

    Reply

Leave a Reply