CSS3 Columnas Fraccionamientos Medio div

Question

Tengo una página web con la estructura de la siguiente manera:

<div id="content"> 
    <div class="post"> 
      <p>content1</p> 
    </div> 
    <div class="post"> 
      <p>content2</p> 
    </div> 
    <div class="post"> 
      <p>content3</p> 
    </div> 
    <div class="post"> 
      <p>content4</p> 
    </div> 
</div> 

y estoy usando columnas de CSS3 para un diseño de 2 columnas tal que la distancia (margen) entre cada div .post arriba, abajo, a la izquierda, y a la derecha es 20px. El problema que tengo es que a veces la parte inferior del div.post inferior izquierdo se corta y continúa en la parte superior de la columna de la derecha.

Tengo problemas para conseguir que div.post completo permanezca en la parte inferior de la columna izquierda en lugar de dividirlo y terminar de mostrarlo en la columna de la derecha. ¡Apreciaría cualquier ayuda que pueda obtener! ¡Gracias!

Además, la altura de cada div.post puede variar, por lo que flotar todo a la izquierda no funciona bien (es desordenado).

EDIT: aquí está la CSS relevante:

comportamiento

#content { 
    margin-bottom:20px; 
    width:910px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 0; 
    -moz-column-count: 2; 
    -moz-column-gap: 0;  
    column-count: 2; 
    column-gap: 0; 
} 

.post { 
    width:410px; 
    margin:20px; 
    padding:10px; 
} 

Answer 1

Según entiendo CSS3 columns, se pretende. Están diseñados para admitir texto de varias columnas y periódico, donde cada columna fluye hacia la siguiente. Sin embargo, todavía no he leído la especificación, por lo que su uso para el diseño de bloques puede ser factible.

Editar: Me encontré con esto hoy: controlling wrapping in css3 columns. Admito que no lo he intentado, pero parece lo que buscas.

Answer 2

columnas que no rompan elementos en el interior con el siguiente código:

-webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 

través CSS Tricks