Search code examples
csslayoutcss-multicolumn-layout

Prevent element fragmentation in multi-column layout

Given this 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;
    white-space:no-break;
}
<div id="wrapper">
    <div>FIRST BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin.</div>
    <div>SECOND BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat.</div>
    <div>THIRD BOX: In at libero ipsum, vel cursus ante. Phasellus ac odio in tortor commodo venenati

I would like to arrange these 3 boxes into 2 columns using the CSS multi-column layout.

JSFiddle Demo

As you can see from my demo, it works. However, I'm concerned with the second box being fragmented into both columns. I would like to prevent this element fragmentation if possible. Is there any way to tell the browser not to fragment my boxes into multiple columns?

(Note that both the second and third box could easily fit into the second column, which is the arrangement I'd like to achieve.)

Solution

  • 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):