Prevent element fragmentation in multi-column layout

Answer 1

Probably using -webkit-column-break-after: always; with the FIRST BOX is appropriate.

<div id="wrapper">
    <div> FIRST BOX: ... </div>
    <div> SECOND BOX: ... </div>
    <div> THIRD BOX: ... </div>
</div>

And this CSS code:

#wrapper { 
    border:2px solid red;
    padding:10px;
    width:310px; 
    //height:310px;
    -webkit-column-width:150px; -webkit-column-gap:10px;
    -moz-column-width:150px; -moz-column-gap:10px;
    column-width:150px; column-gap:10px;
}

#wrapper > div { 
    width:150px;
    background:#ccc;
    margin-bottom:10px;
}
#wrapper > div:first-child {
   -webkit-column-break-after: always;
}

Answer 2

Some experimentation led me to:

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

However, it doesn't work in Chrome Stable/Beta. It works in Chrome Canary (and Dev):