CODEWITHSUNDEEP
htmlcss
user1469270
user1469270

Reputation:

Remove unnecessary space in CSS3 columns

I'm experimenting with the latest columns feature in CSS3. Each ul has varying heights, and I want them to have equal margins above and below. At the moment, because one ul is much longer than the rest, it is pushing the second row down. Is it possible for the longest ul to not force so much space beneath it?

http://jsfiddle.net/t5ng3/

CSS:

.wrapper {
    background-color: grey;
    max-width: 600px;
    -webkit-column-width: 50%;
}

ul {
    background-color: orange;
    display: inline-block;
    vertical-align: top;
    width: 20%;
}

HTML:

<div class="wrapper">
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

Upvotes: 1

Views: 3051

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157284

That's because of white space, which will cause normally a 4px offset, inorder to solve this, there are various ways, the cheap one is to use margin-left: -4px; but this will fail if the font-size > 100%, another way is to use font-size: 0; on the parent element, and the last one is to take out the indentation/white space from the source by sticking up the ul elements..

Demo

You can also float your elements to the left but for this it will be better if you wrap them inside a container div/section element.

Now I am not sure whether you are aware of this or not but you might like to have a look at column-count property which will do a similar job without breaking yourself the ul elements..

Upvotes: 1

cimmanon
cimmanon

Reputation: 68309

The "columns" you're seeing are purely the result of your lists being inline-block, not because you're using column-width. The column-width property does not appear to work as you would expect with a percentage value.

If you want exactly 2 columns, then you would use column-count: 2 rather than column-width: 50%.

http://jsfiddle.net/t5ng3/12/

.wrapper {
    background-color: grey;
    max-width: 600px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
ul {
    background-color: orange;
}

If the child elements should not be split across columns, then the break-inside property is what you're looking for rather than trying to use display: inline-block.

ul {
    background-color: orange;
    -webkit-column-break-inside: avoid; /* old name */
    page-break-inside: avoid; /* Firefox uses non-standard property */
    break-inside: avoid;
}

You may wish to remove the top margin on the first element:

ul:first-child {
    margin-top: 0;
}

Upvotes: 2

codingrose
codingrose

Reputation: 15699

It is happening because there is space between </ul> and <ul>. inline-block elements leave space.

Removeing space i.e. writing </ul><ul> will resolve your problem. Updated fiddle.

Upvotes: 0

Related Questions