CSS column-count not respected

Question

There's a similar question here with no real answer: CSS columns bug — 5 column count only showing 4 (with images)

I'm using column-count to display elements in columns (in this case a set of section elements but this happens regardless of the element used (obviously)).

The problem is that Chrome and Firefox (haven't tried others) don't always respect the specified column count.

If I set it to 4, sometimes it will be 4 and sometimes it will be less than 4 (never more, thankfully).

If I use Firebug (or similar) to modify the height of some of the elements in the columns sometimes the columns jump around from 3 to 4.

This is really strange and really annoying and I'm hoping someone knows why this happens and hopefully how to fix it.

Here's a JSFiddle displaying the problem: http://jsfiddle.net/NY2Zx/ you can play around with the dimensions of the images to see the column count change.

Thanks

Answer 1

check this http://www.w3.org/TR/css3-multicol/#pseudo-algorithm

JSFiddle example is working fine if written in local html file and loaded in firefox and chrome. Try specifying width to div element.