Prevent element fragmentation in multi-column layout

Answer 1

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

    
 FIRST BOX: ... 
    
 SECOND BOX: ... 
    
 THIRD BOX: ... 

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;
}