CODEWITHSUNDEEP
htmlcssfirefox
Nate
Nate

Reputation: 1921

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

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.

Upvotes: 18

Views: 3175

Answers (4)

Rene van der Lende
Rene van der Lende

Reputation: 5281

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>

Upvotes: 8

Qwertiy
Qwertiy

Reputation: 21400

It is possible to check for Firefox using @supports rule.
As the other browsers don't support -moz-column-count they are not affected.
And FF can get individual solution inside of that block.

https://jsfiddle.net/094gmjp2/5/

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

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

@supports (-moz-column-count: 2) {
    ul {
        display: block;
        width: -moz-fit-content;
        width: fit-content;
    }
}
<div>
    <ul>
        <li>asadf</li>
        <li>b</li>
        <li>cadsfa</li>
        <li>d</li>
    </ul>
</div>

Upvotes: 3

m4n0
m4n0

Reputation: 32255

How to properly center the list so that it works in all browsers?

You can use CSS3 flexible box layout to center align the list. Since you are using CSS3 multi-column layout, I assume you are building the list for modern browsers. Thus the flexible box approach is the way to go.

  1. Let the <div> be the flexible items container. justify-content:center will align the list to the center.

  2. Set the column count on the <ul>. You can set the *-column-gap for the spacing between the columns.

Works on Firefox, Chrome, Internet Explorer, Edge and Opera ( i.e. basically all browsers ). Here is a JSfiddle demo

* {
  margin: 0;
  padding: 0;
}
div {
  display: flex;
  justify-content: center;
}
ul {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
  -moz-column-gap: 100px;
  -webkit-column-gap: 100px;
  column-gap: 100px;
}
h2 {
  text-align: center;
  margin-bottom: 10px;
}
<h2> Centered CSS3 multi-column layout </h2>
<div>
  <ul>
    <li>abcd</li>
    <li>b</li>
    <li>cdefg</li>
    <li>d</li>
  </ul>
</div>

Upvotes: 7

om_jaipur
om_jaipur

Reputation: 2196

You should use display:block on ul because column-count don't work properly with display:table in Firefox.

You can use width: fit-content; to center the columns in the div.

div {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}
ul {
  display: block;
  margin: 0 auto;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;

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

Upvotes: 3

Related Questions