column-count

When column-count is used, it seems to crop any overflow content. #columns { -webkit-column-count: 1; -webkit-column-gap: 10px; /*-webkit-column-fill: auto;*/ -moz-column-count: 1; -moz-column-gap: 10px; /*-moz-column-fill: auto;*/ column-count: 1; column-gap: 10px; /*column-fill: auto;*/ border: 1px solid red; overflow: visible; } .pin { width: 100%; display: inline-block; padding: 10px; margin-bottom: 5px; } <div id="columns"> <div class="pin"> <a href="#"> <span class="onsale">Sale!</span> <img src="#.jpg" /> </a> <h3>Product 1</h3> </a> </div> </div> Result: Any ideas how I can fix this?

Here is my code: .column { column-count: 4; column-gap: 10px; -moz-column-count: 4; -moz-column-gap: 10px; -webkit-column-count: 4; -webkit-column-gap: 10px; } <div class="column"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> <div class="inner">12</div> </div> The result is: 1 4 7 10 2 5 8 11 3 6 9 12 What I want is: 1 2 3 4 5 6 7 8 9 10 11 12

I had made one highchart in that tooltip is shows date and time in format but it is showing wrong date and time. Please go through the code below. HTML Code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> Javascript Code var maxval="94"; $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ credits: {

I'm having an issue with Chrome when I use the column-count property. I have a div where inside it I will have some items so I set column-count: 3; When I have 3 items or more it works well, but when I have only two they are not shown in the same row but in the same column. This happens only on Chrome. code example: .userinfo-content .grid-view.author-profile-tabs { .column-count(3); .column-gap(30); .article { position:relative; display: inline-block; margin-bottom: 40px; width: 100%; line-height: 1.3; } } Based on how your markup looks like, the break-inside: avoid-column; should fix that,

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>

When using column-count in a wrapper, and the containers in the wrapper have border-radius applied, and content in the container is overflowing, the content completely disappears in all the columns, except the first one. Here is my example: https://jsfiddle.net/f4nd7tta/ The red semi-circle is only visible in the first column, why? #main_wrap{ width:100%; border:solid 1px black; -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; } #main_wrap > div{ border-radius:5px; overflow:hidden; position:relative; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; column