Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Column-count is not working in Chrome

Tags:

css

google-chrome

css-multicolumn-layout

column-count

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>
like image 544
Federico Avatar asked Feb 01 '17 17:02

Federico

People also ask

Can I use CSS column-count?

column-count can be auto or an integer. Use auto if you are also using column-width . Think of it as a way of telling the browser, to let column-width take the lead. The integer, also known as the number of columns, must be greater than or equal to 0.

2 Answers

Replace display:inline-block by display:block.

According to caniuse, for Chrome issue, you should add -webkit-perspective:1; on the container. 

#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;
 -webkit-perspective:1;
}

.keeptogether{
  display: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>
like image 151
Richard Foucaud Avatar answered Sep 30 '22 08:09

Richard Foucaud

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

like image 27
Serge Inácio Avatar answered Sep 30 '22 09:09

Serge Inácio
Sign in to Comment

Related questions

Overriding :root CSS variables from inner scopes [duplicate]
TEXTAREAs scroll by themselves (on IE8) every time you type one character
Overlap images in CSS
Is it acceptable to use single quotes around values in HTML attributes? [duplicate]
Add padding at the beginning and end of each line of text
Getting rid of user-agent stylesheet rules?
What exactly does the 'only' keyword do in CSS media queries?
How to center image in a div horizontally and vertically
Different behaviours of treating \ (backslash) in the url by FireFox and Chrome
How to get an iframe to occupy full width (i.e. display like a div)
What are the differences between using data-attributes and class / ID for javascript behaviour?
Responsive images positioned over image
Is it possible to rotate element, but not its content with css3?
Adding link a href to an element using css [duplicate]
HTML tag safe for enclosing elements that does nothing [closed]
Flexbox item widths are affected by padding
Square with rounded corners and indented curved border
SVG progress bar
JavaScript blinking eye animation
How do I draw a horizontal line between two circles with CSS?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!