I've been struggling to get a 2-column document to work.
But I just can't get things to hang together the way I want them to.

The basic document design is

<div class="section>
 <h2>Section title</h2>
 <div class="sectiontext">
  <p>Text at start of section</p>
  <div class="subsection">
   <h3>Subsection title</h3>
   <p>Text in the subsection</p>
   <table>...</table>
   <div class="imggroup">
    <div class="imgpair">
     <h4>Title for first img pair</h4>
     <img> <img>
    </div>
    <div class="imgpair">
     <h4>Title for 2nd img pair</h4>
     <img> <img>
    </div>
    <p>caption for the two sets of images</p>
   </div>
  </div>
  <div class="subsection">
   <h3>Subsection 2</h3>
   ...
  </div>
 </div>
</div>

The key bits of the style sheet are

div.section {column-count: 1; page-break-before: always}
div.sectiontext {column-count: 2; }

The intention is the "Section title" run across two columns. Straight after that, we go into the "sectiontext" div, wherein everything is set in 2 columns.
The problem comes when controlling page and column breaking. The rules I want to have are
1) an imgpair must be in 1 column
2) an imggroup must be on 1 page
3) a subsection should be on 1 page
4) the columns and pages should fill as much as they can

I tried this

div.imgpair {column-break-inside: avoid}
div.imggroup {page-break-inside: avoid}
div.subsection {page-break-inside: avoid}
div.sectiontext {column-fill: auto}

But it just doesn't seem to quite work.

I've fiddled around with the font size to simulate having more or less content in each of the divs.
If the font is small, and everything fits in 1 column, there is no drama.
But increasing the font will first force the two subsections together into the 2nd column (leaving the 1st column with just the intro text).
Increasing the font still more (to the point that only 1 subsection fits in a column) suddenly makes both subsections bump to a new page - leaving the intro text marooned on the 1st page.
Increasing it still further (so a subsection is bigger than a column) gives the hoped-for page break between the subsections, but still leaving the intro marooned.

What is frustrating is it almost works... but not quite.

Am I missing something?

I can supply a more complete (but still trimmed down) working example if needed.

If you can email me (mikeday@yeslogic.com) a slimmed down example document then we can take a look at it and see if we can tweak the style appropriately.

The issue seems to be that Prince doesn't actually support a separate property called "column-break-inside", so the "page-break-inside" property is serving double duty and inhibiting breaks across columns and across pages.

The only immediate option is not to use "page-break-inside: avoid" on subsections so that they can break across columns, and put up with the fact that they might also break across pages.

Hopefully we can remove this limitation in a future release by adding a support for the column-break-inside property.

Any news after 4 ½ years? I tried break-inside (not column-break-inside) but there is no effect.

It's still on the roadmap! Once Prince 9 is out, we'll take a look.

By a remarkable coincidence, I am seeing this issues again right now (as I am making changes to a publication we have been generating for the last 5 years - the one I talked about back at the start of this thread).
So it's still on my wishlist too.

Hi Mike,

Just come across an issue where there's a problem with `column-break-inside`. Your CSS references (https://www.princexml.com/doc/css-refs/#css-refs) section of the documentation suggests that you fully support the CSS Multi-Column spec, but it looks like the latest version of PrinceXML still doesn't support `column-break-inside`.

Edited 19 Jul 2017 by abitgone

Oops, the specification has changed since we wrote that. We do intend to support the "break-inside" property, but for now the only way is to use page-break-inside.

Great – that workaround works perfectly.