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 e

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.

Answer 2

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/

Answer 3

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.

Answer 4

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.