cssgoogle-chromecolumn-countcss-multicolumn-layout

Column-count is not working in Chrome


I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome.

Tested with Chrome 55.0.2883.95 (64-bit)

Any help would be greatly appreciated.

#people{
 -webkit-column-count:4;
 -moz-column-count:4;
 column-count:4;
 -webkit-column-gap:.5em;
 -moz-column-gap:.5em;
 column-gap:.5em;
 padding-bottom:2px;
 font-size:18px;
 line-height:21px;
}

.keeptogether{
  display:inline-block;
  width:100%
}
<div id=people>
<div class=keeptogether>
A<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>

<br>B<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>C<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
D<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>E<br>
fhdjsklfhs<br>
<br>F<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>G<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>H<br>
fhdjsklfhs<br>
<br>I<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>J<br>
<br>K<br>
fhdjsklfhs<br>
</div>
<div class=keeptogether>
L<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>M<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>N<br>
fhdjsklfhs<br>
<br>O<br>
fhdjsklfhs<br>
<br>P<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<span class=yes><br></span>
</div>
<div class=keeptogether>
Q<br>
<br>R<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>S<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>T<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>U<br>
<br>V<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
fhdjsklfhs<br>
<br>W<br>
<br>X<br>
<br>Y<br>
fhdjsklfhs<br>
<br>Z<br>
fhdjsklfhs<br>
</div>
</div>


Solution

  • Add display: flex; to your #people id in your css:

    #people{
      display: flex;
     -webkit-column-count: 4; /* Chrome, Safari, Opera */
     -moz-column-count: 4; /* Firefox */
     column-count: 4;
     -webkit-column-gap:.5em;
     -moz-column-gap:.5em;
     column-gap:.5em;
     padding-bottom:2px;
     font-size:18px;
     line-height:21px;
    }
    
    .keeptogether{
      display:inline-block;
      width:100%;
    }
    <div id=people>
      <div class="keeptogether">
      A<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
    
      <br>B<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>C<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      </div>
      <div class="keeptogether">
      D<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>E<br>
      fhdjsklfhs<br>
      <br>F<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>G<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>H<br>
      fhdjsklfhs<br>
      <br>I<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>J<br>
      <br>K<br>
      fhdjsklfhs<br>
      </div>
      <div class="keeptogether">
      L<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>M<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>N<br>
      fhdjsklfhs<br>
      <br>O<br>
      fhdjsklfhs<br>
      <br>P<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <span class="yes"><br></span>
      </div>
      <div class="keeptogether">
      Q<br>
      <br>R<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>S<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>T<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>U<br>
      <br>V<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      fhdjsklfhs<br>
      <br>W<br>
      <br>X<br>
      <br>Y<br>
      fhdjsklfhs<br>
      <br>Z<br>
      fhdjsklfhs<br>
      </div>
    </div>

    Hope it helped