Why is my column-count not working with Bootstrap in Chrome?

Question

I tried displaying multiple buttons in columns using

.columnized {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

and markup

<div class="columnized col-md-6">
    <p>
        <button type="button" class="btn btn-default btn-xs">text</button>
    </p>
    <!-- ... more buttons ... -->
</div>

but the entire div is showing like a line and all the ps looks like they are floated to the right.

It's curious that this works in Firefox 28 and even Internet Explorer 10 and not in Chrome 33.

Answer 1

I was using Twitter's Bootstrap and the .col-md-6 has defined min-height as 1px, hence the thin line.

I managed to solve it by adding min-height: initial to my columnized class.

Hope this helps others that bump against this odd problem.

Answer 2

I also found that using

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

and

break-inside: avoid-column;
-webkit-column-break-inside: avoid;

solved problems with content breaking vertically between columns.

The column-count tag is easier to implement than floating divs, the main difference being that column content is ordered vertically, while floated content is ordered horizontally. Hope this helps.