CODEWITHSUNDEEP
htmlcss
Michael Roach
Michael Roach

Reputation: 168

Column Count Splitting Padding Bottom to Next Column

In Chrome and Safari, Column Count is splitting the bottom padding of my List Item into the next column. Display:inline-block; on the "a" fixes this issue, but then I lose the full-width background hover effect.

I've tried re-writing the padding to a margin, but for some reason display:block; doesn't count the padding or bottom margin when calculating the split.

Is there a work-around to this issue?

Screenshot

Codepen: http://codepen.io/roachdesign/pen/rOqjNM

Upvotes: 5

Views: 1523

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

Move your rules for break-inside from your ul to your li.

Change this:

header nav ul li.menu-item-25 ul {
    ...
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    ...
}

To:

header nav ul li {
    ...
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

Your modified codepen: http://codepen.io/Abhitalks/pen/YyJNQJ

The reason being, you want the column-items to avoid breaking themselves from inside instead of the column-container.

Upvotes: 4

Related Questions