CSS columns displaying incorrectly

Question

I have a div with column-count set to 3. Inside are a number of uls. I am seeing the beginnings of a 4th column on the right side - why would this show up when I've specified 3 columns?

Screenshot

HTML (Fiddle here: http://jsfiddle.net/B6zDR/3/)

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <style type="text/css">
            div
            {
                height: 150px;
                width: 835px;
                padding: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                -moz-column-count: 3;
                -webkit-column-count: 3;
                column-count: 3;
                background-color: lightblue;
            }

            h2
            {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>UL #1</h2>
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
            <h2>UL #2</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <h2>UL #3</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <h2>UL #4</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <h2>UL #5</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
</html>

I think your fiddle has the HTML in the wrong place sir!

thatidiotguy
– thatidiotguy

2012-12-14 19:19:19 +00:00
Commented Dec 14, 2012 at 19:19 — thatidiotguy
– thatidiotguy, Commented Dec 14, 2012 at 19:19
Whoops, pasted link to wrong version! jsfiddle.net/B6zDR/3

Josh M.
– Josh M.

2012-12-14 19:29:25 +00:00
Commented Dec 14, 2012 at 19:29 — Josh M.
– Josh M., Commented Dec 14, 2012 at 19:29
What browser are you seeing this under?

Konstantin Dinev
– Konstantin Dinev

2012-12-14 19:31:44 +00:00
Commented Dec 14, 2012 at 19:31 — Konstantin Dinev
– Konstantin Dinev, Commented Dec 14, 2012 at 19:31

Rémi Breton · Accepted Answer · 2012-12-14 19:34:30Z

2

The only thing that can override a column-count declaration is the height declaration. In your example, your are limiting the height of the div element, but specifying a 3 columns layout. Therefore, your div is trying to force a 3 column layout, runs out of space, and overflows to the right.

Check out "Test #6" on http://www.quirksmode.org/css/multicolumn.html

answered Dec 14, 2012 at 19:34

Rémi Breton

4,2992 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh M. Over a year ago

Hmm, I see. It would be cool if there was a way to say "3 columns - hide the rest." That's what I'm going for here...maybe an ellipsis. But I can't get that to happen.

thatidiotguy · Accepted Answer · 2012-12-14 19:31:57Z

1

Okay, so this is just a guess so keep that in mind.

Since changing the HTML 5 column-count attribute does not change anything in Firefox 17 but moz-column-count does, that would seem to imply that it is still in development phase. This could very well be a bug.

answered Dec 14, 2012 at 19:31

thatidiotguy

9,01114 gold badges66 silver badges109 bronze badges

1 Comment

Josh M. Over a year ago

Yes, agreed it could be a bug.

Collectives™ on Stack Overflow

CSS columns displaying incorrectly

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related