CODEWITHSUNDEEP
htmlcsslayout
Josh M.
Josh M.

Reputation: 27783

CSS columns displaying incorrectly

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>

Upvotes: 0

Views: 328

Answers (2)

R&#233;mi Breton
R&#233;mi Breton

Reputation: 4259

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

Upvotes: 2

thatidiotguy
thatidiotguy

Reputation: 8991

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.

Upvotes: 1

Related Questions