Question

I would like to have a two column layout of posts. It should be balanced, but it is acceptable if one is slightly bigger than the other. The important thing is, the posts should not break into halves.

The specific problem: (The post texts should stay in one column.)
http://www.magyarregeszet.hu/?page_id=279

#main-column-multicol2 {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:20px; /* Firefox */
-webkit-column-gap:20px; /* Safari and Chrome */
column-gap:20px;
column-fill: auto;

padding-top:20px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}

Is there a way in making unbreakable divs, boxes, etc.?
I have found column-break-inside: avoid-column; but does not do the trick. How to use this properly?

Edit:
The structure of a post wrapper is this. The a column-break-inside works for a paragraph for example, but i would like it to work for the outmost div.

<div class="unbreakable-post">
<header class="opacity box">
<h2>...</h2>
</header>
<hr />
<div class="entry">
...
</div>
</div>

Thanks,

Sziro

Answer 1

I’ve had success with

.post {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

Give that a try.