Having an issue with css3 columns.

Given the following:

<div id="content" style="columns: 3; column-fill: auto; height: 500px;">
  <div class="box" style="border: 1px solid black;">
    <div class="head" style="border-bottom: 1px solid black">A header for the box</div>
    <div class="body">Some text. Could be long, could be short</div>
  </div>
  ... many more boxes ...
</div>

The problem is the columns go down and bleed through the bottom of #content. Is there a way for force the columns to stay within the context of the containing div?

Thanks!

Hmm, that's a bit awkward. Switching to balanced columns helps, but it does seem undesirable for the unbalanced columns to behave like that. We'll take a look.

We've changed the behaviour of unbalanced columns for Prince 7.0, and there is a new beta version available now if you would like to give it a try.