CODEWITHSUNDEEP
htmlcssmultiple-columns
Adam Pietrasiak
Adam Pietrasiak

Reputation: 13194

Why CSS3 columns override each other

I want to use css3 columns to create horizontal layout.

I've got several horizontal groups of content that should have some spacing between each other and they should not break into new line.

When I put several elements with css columns each next to other, then one group override another (seems like they have 100% width and they dont respect their horizontal expantion by content)

<div class="horizontal-groups-wrapper">
    <div class="horizontal-group">...</div>
    <div class="horizontal-group">...</div>
</div>

here is fiddle:

http://jsfiddle.net/fee2G/1/

Expected result: Each next group with css columns lays nicely after previous group

Actual result: Each next group overrides previous like it would have smaller width than it really has.

ps. I would rather want to find solution, not workaround as example is totally simple.

Upvotes: 1

Views: 97

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62763

Determining the width of the columnized element is tough. I would recommend removing the two columnized divs and moving all the content into a single columnized element, then forcing a break before your h2 elements to get the effect you want using the break-before property.

h2 {
  -webkit-column-break-before: always;
  break-before: column;
}

Here's the demo.

Upvotes: 3

Related Questions