CSS column not respected

Question

There is a similar question here with no real answer: CSS Column Error - 5 columns displaying only 4 (with images)

I use 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 (have not tried others) do not always take into account the specified number of columns.

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

If I use Firebug (or similar) to change the height of some elements in the columns, sometimes the columns move from 3 to 4.

This is really weird and really annoying, and I hope someone knows why this is happening and hopefully how to fix it.

Here JSFiddle displays the problem: http://jsfiddle.net/NY2Zx/ you can play around with image sizes to see the change in the number of columns.

thanks

Answer 1

In your example (jsfiddle) there are 5 elements of equal size, which will be distributed over 4 columns. Since they will not be located next to each other (there are more than 4 of them), the first column will contain 2 elements. This determines the height of the container, so the second column will also get 2 elements, and there will be one third column and none for the fourth column. There are four columns, but the fourth is just empty ...

In other words: the height of the container is determined by the minimum height that is necessary so that all elements are in the number of columns. Once this is done, the content will be filled into columns starting on the left, and each column will receive as much content as is appropriate for it.

Answer 2

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

The JSFiddle example works fine if it is written in a local html file and loaded in firefox and chrome. Try specifying the width for the div element.

Answer 3

here is an example of work, but with an image wrapper 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 you change the height of the line, then again there is an error.

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

Answer 4

For some reason, I'm not sure why, having an empty paragraph ending with text, the columns will be fixed again. This is not an ideal fix, as it should flow without empty elements, but it is a possible quick fix that I came across for those who still have this problem.