CSS column-count not respected

Problem

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

Problem courtesy of: powerbuoy

Solution

In your example (jsfiddle), there are 5 elements of equal size to be distributed into 4 columns. Since they won't fit next to each other (they are more than 4) , the first column will contain 2 elements. That defines the height of the container, so the second column will also get 2 elements, and so there's one remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...

In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.

Solution courtesy of: Johannes

Discussion

here work example, but with image wrap element.

.wrap {    
    -webkit-columns: 4 auto;
    -moz-columns: 4 auto;
    columns: 4 auto;
}

.wrap .img {
    display: block;
    margin: 0 0 10px;
    line-height: 0px;
}

​If change line-height then error there again.

http://jsfiddle.net/NY2Zx/4/

Discussion courtesy of: Mark Nolan

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.

Discussion courtesy of: gimley

For whatever reason, I'm not sure why, having an empty paragraph trailing the text will reflow columns again. This is not an ideal fix, as it should flow without empty elements, but it is a possible quick fix I've encountered, for someone who is having this problem still.

Discussion courtesy of: creativename

This recipe can be found in it's original form on Stack Over Flow.