Keep a Heading with the Following Text

Question

I'm using the css column-count feature to break my section into two columns. On one page, I have an h3 heading at the bottom of the first column and the following p paragraph at the top of the next. I'd like to keep the heading with the first few sentences of the paragraph. I can keep it with the entire paragraph by wrapping both in a div styled with inline-block. This would work with short paragraphs, but not with long ones. I could also arbitrarily break up the paragraph, but I might have to put it back together if additional content was added before the heading forcing it to the next column. I wouldn't be surprised if it's not possible as column-count is new.

UPDATE

Based on a suggestion by @Jon below, I tried break-inside from examples I found on the Web now that I know the key word.

CSS:

.heading-with-text    {
   -webkit-column-break-inside: avoid;
   -moz-column-break-inside: avoid;
   break-inside: avoid;
}

HTML:

<section class="heading-with-text">
    <h3>Blah, Blah</h3>
        <p>woof, woof</p>
</section>

On an OS X platform, it didn't work at all in Firefox 24.0. In Safari 6.0.5 and Chrome 30.0.1599.66, It moved the heading to the next column so that it was above the text. However, no matter how much text I added to the paragraph, the browsers wouldn't put a break in the paragraph. It worked just like inline-block. I guess they took 'avoid' to mean avoid at all costs. This approach appears to be correct way. It's just not well supported at this time.

Answer 1

Instead of a div, place the heading and its corresponding content in a section:

<section>
  <h3>Keep a Heading with the Following Text</h3>
  <p>I’m using the CSS <code>column-count</code> feature…
</section>

And instead of display: inline-block, use column-break-inside: avoid. This should hint to the column breaking algorithm not to split content across column boundaries.