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/