Two-column div contained within individual printed pages

Question

Sorry if this has been asked before, but here goes:

I'm creating reports using HTML and CSS, though they eventually get PDF'ed. The report needs to contain two-column layout on most pages, so I'm using:

<div class="two_columns">
  <p>Lots and lots of text...</p>
  <p>And multiple paragraphs...</p>
</div>

with

div.two_columns {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

However, for any report section that is long enough to span multiple pages, the left column continues onto the second page and goes until about half the text in that div is displayed, then it wraps into the right column back on the first page. But I want the left column to wrap into the right column on the first page until the first page is filled with text, and then wrap into the left column on the second page (and display about the same amount of text in each of the two columns on the second page). Is there a way to do this? I do not want to have to create separate divs for the individual columns or pages, because the length of these different sections depends on features of the data, which will be different for each unit being reported on.

score 1 · Accepted Answer · edited Aug 24 '17 at 15:29

First, you have to specify the height of div. Then you can use column-fill: auto;.

.balanced {
  border: 1px solid #c1c1c1;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-fill: balanced;
  -moz-column-fill: balanced;
  column-fill: balanced;
}

.unbalanced {
  border: 1px solid #c1c1c1;
  height: 500px;
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

<h2>Balanced</h2>
<div class="balanced"><p>Lorem ipsum dolor sit amet, ne inani nullam cum. Et tale facilisi mel, tation graeci facilisi ne nec, vix voluptaria mnesarchum repudiandae te. Mutat minim virtute ei sea, his augue atomorum explicari cu. At mea mucius suscipiantur, vix no alia aliquando. Pro et regione laboramus, ridens deterruisset sit te.</p>

<p>Sit ea elit bonorum iracundia, mucius luptatum has et. Te his modus labores conclusionemque, eu ius salutandi efficiendi, an usu alia commune. Vero menandri vis eu, exerci complectitur id has. Commune abhorreant liberavisse cum an. Nam eu nibh utinam audire, ius in dico aliquid partiendo, sed delicata assentior ei.</p>

<p>Has ludus nemore cu, liber scaevola instructior mel ei. Copiosae pertinacia vix ne, duo eu prima nostrum, nec eu autem posse facilisi. Impetus invidunt elaboraret ad eos. Tale argumentum te quo.</p>

<p>Eu ullum option definitionem pro, est erat novum ornatus ea, utinam deleniti vim no. Nec adipisci maluisset in, ex solum labores iudicabit sit. Et quo fabulas admodum petentium. Ea postulant iracundia contentiones quo. Ea est oratio altera.</p>

<p>Eam esse adhuc theophrastus et. Sit ei duis fierent, cum ex eius iriure fabulas. Nec albucius deserunt no. Vix albucius placerat reprimique in, est ei erat nusquam referrentur.</p></div>

<h2>Unbalanced</h2>
<div class="unbalanced"><p>Lorem ipsum dolor sit amet, ne inani nullam cum. Et tale facilisi mel, tation graeci facilisi ne nec, vix voluptaria mnesarchum repudiandae te. Mutat minim virtute ei sea, his augue atomorum explicari cu. At mea mucius suscipiantur, vix no alia aliquando. Pro et regione laboramus, ridens deterruisset sit te.</p>

<p>Sit ea elit bonorum iracundia, mucius luptatum has et. Te his modus labores conclusionemque, eu ius salutandi efficiendi, an usu alia commune. Vero menandri vis eu, exerci complectitur id has. Commune abhorreant liberavisse cum an. Nam eu nibh utinam audire, ius in dico aliquid partiendo, sed delicata assentior ei.</p>

<p>Has ludus nemore cu, liber scaevola instructior mel ei. Copiosae pertinacia vix ne, duo eu prima nostrum, nec eu autem posse facilisi. Impetus invidunt elaboraret ad eos. Tale argumentum te quo.</p>

<p>Eu ullum option definitionem pro, est erat novum ornatus ea, utinam deleniti vim no. Nec adipisci maluisset in, ex solum labores iudicabit sit. Et quo fabulas admodum petentium. Ea postulant iracundia contentiones quo. Ea est oratio altera.</p>

<p>Eam esse adhuc theophrastus et. Sit ei duis fierent, cum ex eius iriure fabulas. Nec albucius deserunt no. Vix albucius placerat reprimique in, est ei erat nusquam referrentur.</p></div>

Here is JSFiddle for you.

And here is the good source about it.

Two-column div contained within individual printed pages

1 Answers1