4

I'm trying to make responsive layout with columns but in some cases their count is changing. I've set column-count:3 but when I have 4 divs they are positioned 2x2 not 3x1.

The same bug occurs when I have 7 columns and so on.

#content {
    width: 980px;
    height:1000px;
    position:relative;
    margin: 0 auto 0 auto;
    background-color:white;
    max-width: 980px;
}

#columns {
    font-size:1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 0.625em;
    -webkit-column-fill: balance;
    -moz-column-count: 3;
    -moz-column-gap: 0.625em;
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 0.625em;
    column-fill: balance;
}

.news {
    margin-bottom:0.938em;
    display: inline-block;
    background: blue;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 0.625em;
}

.newsheader {
    width:100%;
    padding-bottom: 0.75em;
}
<div id="wrapper">
    <div id="content">
        <div id="columns">
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
            <div class="news">
                <p class="newsheader">Lorem ipsum dolor sit amet...</p> <span class="newscontent">Lorem ipsum dolor sit amet...</span>
            </div>
        </div>
    </div>
</div>

Here's a JSFiddle demo: http://jsfiddle.net/BmG44/

TylerH
  • 20,799
  • 66
  • 75
  • 101
  • 1
    [Take out `display: inline-block`, from `.news`, and it seems to work](http://jsfiddle.net/davidThomas/BmG44/1/). – David Thomas Feb 24 '13 at 15:35
  • Thanks but the content breaks, although I've set `-webkit-column-break-inside: avoid;` –  Feb 24 '13 at 15:38

3 Answers3

3

Balancing columns

Here's the behavior I observed in FF, Chrome, and Opera:

1 element:    1 0 0
2 elements:   1 1 0
3 elements:   1 1 1

4 elements:   2 2 0   (expected: 2 1 1)
5 elements:   2 2 1
6 elements:   2 2 2

7 elements:   3 3 1   (expected: 3 2 2)
8 elements:   3 3 2
9 elements:   3 3 3

With 4 and 7 elements, the browser is choosing to balance the first 2 columns, rather than spreading the elements out over as many columns as possible.

Order of the elements

The columns are filled sequentially when they're balanced. In other words, if 8 elements are added to 3 columns, the columns will be filled as shown below:

1    4    7 
2    5    8
3    6

...rather than like this:

1    2    3 
4    5    6
7    8

Demo (tested in FF, Chrome, Opera)

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
  • OK but when I changed the content and respectively - the height a bug occured - Opera's rendering only 2 columns while Chrome and Firefox are rendering 3 but in a different way - see http://sou2.bgschool.bg/ –  Feb 24 '13 at 16:46
  • 1
    It's possible that the precise behavior for balancing columns was left up to browsers to implement as they see fit (i.e., not fully defined by the W3C). The columns appear to be filled sequentially when they're balanced, which helps explain the odd disparity between FF and Opera for your http://sou2.bgschool.bg/ example. I updated the answer above to reflect this. – Matt Coughlin Feb 24 '13 at 17:09
  • Thank you. I'll just set `column-width:300px;` instead of `column-count:3;` –  Feb 24 '13 at 17:15
0

You just don't have enough content to make the 3rd column. Add a few more news elements and the 3rd one appears:

http://jsfiddle.net/BmG44/10/

The specification has this to say about column-count:

describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both ‘column-width’ and ‘column-count’ have non-auto values, the integer value describes the maximum number of columns.

http://www.w3.org/TR/css3-multicol/#column-count

There's nothing in the phasing that I can see that indicates that specifying 3 columns means that you'll get exactly 3 columns. It would be nice if instead of getting 2 columns of content and 1 empty column, that you got 2 columns and no empty space.

Also, the correct property name for avoiding breaks is break-inside, though some browsers still accept of column-break-inside (I think Webkit doesn't honor the new name at all).

cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • But I have 4 elements and I need 3 to make 3 columns? –  Feb 24 '13 at 16:00
  • 1
    You would think that, but if you have 5 elements, it still won't make 3 columns. I can't tell you why, but that's the way it is. How the children get divided up into the columns has more to do with their height than their quantity. Try using more organic looking content (eg. elements of different lengths). I usually specify `column-width` instead of `column-count`, since it is more responsive, but I see the same thing on occasion. – cimmanon Feb 24 '13 at 16:28
  • Actually, in this case 5 elements does get divided into 3 columns, same with 3 elements. But in general I'm seeing behavior consistent with what @cimmanon is saying. To observe this, start the demo with 1 element, then progressively add another element and run it, and see how the columns are filled after each one. It's much easier to observe if you remove most of the content from each element. – Matt Coughlin Feb 24 '13 at 16:35
0

I had the same issue with a list of five elements. Just in case someone needs it, an ugly hack to work around the problem is to count the elements of the list and if they are five, add an extra, empty item after the fourth element.

giorgos
  • 398
  • 2
  • 6