Stop CSS3 columns breaking paragraphs up

Question

How would I go about stop the browser from breaking up paragraphs when using CSS3 columns? I have this code:

<div class="container">
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
</div>

.container {
    column-count: 3;
 }

This is a visual representation of what I want. On the left, is what happens by default, and on the right, what I want to happen.

I don't mind if the columns are unequal lengths, what's important is that none of the divs are broken across columns.

Answer 1

The setting break-inside: avoid would do this, according to the description of break-inside in the CSS Multi-column Layout Module. But browser support is limited so that you need to use additionally some other settings that reflect ideas in older drafts, implemented in some browsers:

.container {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
 }
div.box { 
  text-indent: 1em; /* To show paragraph starts. */
  page-break-inside: avoid; /* For Firefox. */
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */
}

<div class="container">
    <div class="box">This is a short paragraph.</div>
    <div class="box">This is a short paragraph, too.</div>
    <div class="box">This is yet another short paragraph.</div>
    <div class="box">This is a short paragraph.</div>
    <div class="box">This, too, is a short paragraph.</div>
    <div class="box">This is a longer paragraph, which may get divided into two columns..</div>
    <div class="box">This is a short paragraph.</div>
    <div class="box">This is a short paragraph.</div>
</div>

Answer 2

On the .box add the style:

.box {
    display:inline-block;
    ... other styles ...
}

Demo: http://jsbin.com/murog/1/