Why does my multi-column layout put everything into one column in Firefox?

Question

In Firefox 31, this code shows up as only one column instead of multiple columns:

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}
#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
}
.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
.pin p {
    color: #333;
    margin: 0;
}
@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}
@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

<div id="wrapper">
    <div id="columns">
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>  
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Nullam eget lectus augue. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
            </p>
        </div>  
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. 
            </p>
        </div>
        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. Nam ac elit risus, 
                ac blandit dui. Duis rutrum porta tortor ut convallis.
            </p>
        </div>
    </div>
</div>

Why is that?

imbondbaby · Answer 1 · 2014-07-28T12:22:57.527

2

In .column, remove:

-moz-column-fill: auto;

Or you can use:

-moz-column-fill: balance;

column-fill is only a Candidate Recommendation, so there might be different browser behavior.

To make it work.

JSFiddle Demo

edited Jul 28 '14 at 12:22

answered Jul 28 '14 at 12:17

imbondbaby

6,351
3
21
54

score 0 · Answer 2 · answered Jul 28 '14 at 12:21

0

Remove -moz-column-fill to make it work.

answered Jul 28 '14 at 12:21

CroaToa

900
2
14
36

score 0 · Answer 3 · answered Jul 28 '14 at 12:25

0

This should do the trick:

#column {
    -moz-column-fill: balance;
}

answered Jul 28 '14 at 12:25

Barun

4,245
4
23
29

Suresh Karia · Answer 4 · 2014-07-28T12:40:07.360

Your new code is Here >>>>>>>>>>>> Problem Solved

working fine in chrome, opera , ie , firefox , safary tested in all browsers!

auto -Is a keyword indicating that columns are filled sequentially.

balance -Is a keyword indicating that content is equally divided between columns.

CSS

  #columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;    
    -webkit-column-fill: balance;    
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 10px;
    column-fill: balance;
}

Why does my multi-column layout put everything into one column in Firefox?

4 Answers4