CODEWITHSUNDEEP
csslayoutmultiple-columns
Rebecca Cook
Rebecca Cook

Reputation: 111

CSS3 Columns aren't filling evenly

For a visual reference as to what I'm talking about, please see the following site and click into one of the subheader dropdown items: http://bmgz.rtcgraphics.com/#3

This is a bit of a conceptual question but I have a set of three columns that I am filling using the following CSS3 declarations:

#bullets {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 20px 10%;
    z-index: 5;
    color: white;
    width: 100%;
    background: rgba(0,0,0,0.4);
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 23.333%; /* Chrome, Safari, Opera */
    -moz-column-width: 23.333%; /* Firefox */
    column-width: 23.333%;
    -webkit-column-fill: balance; /* Chrome, Safari, Opera */
    -moz-column-fill: balance; /* Firefox */
    column-fill: balance;
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

The columns are filling unevenly. Sometimes the columns will fill such that the bullets fall in a set of 2, 2, and then 0 items in the last column. Other times it will be 4, 4, 1.

I am very confused as to how the browser is deciding to fill the columns. It seems to be consistent across all browsers. My goal would be to have the columns fill horizontally left-to-right, so that a set of 4 items would fill 2, 1, 1

Any and all guidance would be so helpful!

Thank you!

Upvotes: 1

Views: 1169

Answers (1)

Rebecca Cook
Rebecca Cook

Reputation: 111

Couldn't find a direct answer for this question, but if I just make the list items float:left and have width: 33% of the ul space, I get the effect I was looking for. Lord only know why the built-in CSS columns fill so unevenly.

Upvotes: 1

Related Questions