Combining "column-count" and "display: table" renders single column in Firefox

Question

I am trying to work out an issue in Firefox (I'm using 40.0.3) where using -moz-column-count and display: table causes a list to display as one column. Here's my example and a jsfiddle:

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  display: table;
  margin: 0 auto;
}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

I'm using display: table to center the columns in the div. In Edge, IE10 and Chrome the list is in two columns.

My question is how can I get two columns with display: table in Firefox or how to properly center the list so that it works in all browsers.

Answer 1

Actually, I think Chrome and IE are the ones being wrong. They do give what you want, but they should not, like FF.

In your code you 'say' split-div-in-2-columns but essentially you put in only one ul. When you split your ul in two (see snippet) then FF works as expected, as do CH and IE BTW.

If I had created your code I actually would expect only one column, namely an ul of li's (or one div of p's, one p of span's, etc.). A second ul would be the second column (a second div..., etc.). Hence my conclusion that Chrome and IE mess up.

I hate unexpected behaviour like this, makes one unsure which browser is correct.

Here is the corrected code:

div {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2; /* demo code */
}
ul {
  display: table;
  margin: 0 auto;
}

<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
  </ul>
  <ul>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

- Update with extra demo code -

In addition some demo snippet how you could use it without a table. Simply take your code remove the table stuff and move the column-count to the ul.

That works just as well:

ul, li {
    list-style-type: none; padding: 0;
}

div {
    width: 500px; /* just some width */
    border: 2px dashed silver;
    margin: 0 auto; /* center in body */
}
ul {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    margin: 0 auto; /* center in div */
}

li {
    border: 1px dotted red;
}

 <div>
    <ul>
        <li>abcd</li>
        <li>b</li>
        <li>cdefg</li>
        <li>d</li>
    </ul>
</div>