foxandsticks foxandsticks - 6 months ago 20
CSS Question

CSS Columns Failing when Used with Unordered Lists in Firefox (27)

I'm having an issue where a menu organized using unordered lists will not populate a CSS two-column layout in Firefox (27). It works fine in IE10 and Chrome (32).

I haven't been able to find any solution to this problem, but I'm guessing it cannot be unique to me. Here is a jsfiddle demonstrating the issue: http://jsfiddle.net/yGyeh/1/

And the code in the fiddle (Stack says this is required)--HTML:

<div id="container">
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
<ul>
<li>
When
</li>
<li>
I
</li>
<li>
Look
</li>
<li>
To
</li>
<li>
The
</li>
<li>
Sky
</li>
</ul>
</div>


CSS:

#container {
-webkit-column-count: 2;
-webkit-column-gap: 0;
-webkit-column-fill: auto;
-moz-column-count: 2;
-moz-column-gap: 0;
-moz-column-fill: auto;
column-count: 2;
column-gap: 0;
column-fill: auto;
}


Thank you.

Answer

Remove the column-fill property for moz and it works as it should. Seems like a bug to me.

http://jsfiddle.net/yGyeh/2/

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    /*-moz-column-fill: auto;*/
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
}

Alternately, you could add an explicit height.

http://jsfiddle.net/yGyeh/3/

#container {
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-fill: auto;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -moz-column-fill: auto;
    column-count: 2;
    column-gap: 0;
    column-fill: auto;
    height: 30em;
}
Comments