Question

I’ve got a webpage with structure as follows:

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

And I’m using CSS3 columns for a 2-column layout such that the distance (margin) between each div.post above, below, to the left, and to the right is 20px. The problem I’m having is that sometimes the bottom of the bottom-left div.post gets chopped off and continues at the top of the right column.

I’m having trouble getting the full div.post to stay at the bottom of the left column rather than splitting and finishing displaying on the right column. I’d appreciate any help I can get! Thanks!

Also, The height of each div.post may vary, so floating everything to the left doesn’t work well (it’s messy).

EDIT: here’s the relevant CSS:

#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

As I understand CSS3 columns, this is intended behavior. They are designed to support multi-column, newspaper-like text, where each column flows into the next. I haven’t read the spec yet, though, so using them for block layout may be doable.

Edit: I came across this today: controlling wrapping in css3 columns. I admit I haven’t tried it, but it sounds like what you’re after.