how can I break column from heading?

Question

I'm using the column-count css but when the single column is divided into three columns it's heading is on first column and the rest in another column

#xmap{
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

demonstration

Question: Can I force to break from heading? Here in my fiddle I want headermenu to shift it from first to second column with css only?(without touching markup)

I have another choice to use nth-child() demo

But this creates the space above of footer-menu. How can I truncate that space?

Possible duplicat [CSS column breaks?](http://stackoverflow.com/questions/6424088/css-column-breaks) — Vucko, Oct 31 '13 at 11:16
One possibility is to use JavaScript to add the columns `max-height` to all columns. — Vucko, Oct 31 '13 at 11:33

score 0 · Answer 1 · answered Oct 31 '13 at 11:15

0

You can use

#xmap h2 {
  column-break-after: avoid;
}

and the vendor prefixed variants.

answered Oct 31 '13 at 11:15

darthmaim

4,970
1
27
40

The heading "headermenu" is in the 2nd column for me without changing anything, but my answer should work. – darthmaim Oct 31 '13 at 11:33

how can I break column from heading?

1 Answers1