title: CSS column layout has an incorrect column-count
body: <p>I'm trying to make responsive layout with columns but in some cases their count is changing. I've set <code>column-count:3</code> but when I have 4 divs they are positioned 2x2 not 3x1. </p>
  
  <p>The same bug occurs when I have 7 columns and so on.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
      &lt;div id="content"&gt;
          &lt;div id="columns"&gt;
              &lt;div class="news"&gt;
                  &lt;p class="newsheader"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt; &lt;span class="newscontent"&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="news"&gt;
                  &lt;p class="newsheader"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt; &lt;span class="newscontent"&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="news"&gt;
                  &lt;p class="newsheader"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt; &lt;span class="newscontent"&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="news"&gt;
                  &lt;p class="newsheader"&gt;Lorem ipsum dolor sit amet...&lt;/p&gt; &lt;span class="newscontent"&gt;Lorem ipsum dolor sit amet...&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a JSFiddle demo: <a href="http://jsfiddle.net/BmG44/" rel="nofollow noreferrer">http://jsfiddle.net/BmG44/</a></p>