Two-column div contained within individual printed pages

267
July 25, 2017, at 9:57 PM

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.

Answer 1

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

Here is JSFiddle for you

And here is the good source about it.

Rent Charter Buses Company
READ ALSO
css - Two fonts in one page for two languages

css - Two fonts in one page for two languages

I'll explain myselfI want my users to be able to write (in inputs, etc

276
Why can&#39;t CSS padding be partially inherited using shorthand?

Why can't CSS padding be partially inherited using shorthand?

From time to time when browsing through stylesheets, I have seen rules such as the following:

177
How to apply a line of css to all browsers but IE?

How to apply a line of css to all browsers but IE?

I don't want to recreate a file just for that specific line of code, I simply want to ignore that css line if I am in Internet ExplorerI would also like to avoid putting inline css

293
AngularJS- how to hide elements using ng-hide?

AngularJS- how to hide elements using ng-hide?

I have an app that has been written in AngularJS, and am currently trying to add the functionality to hide the headings of some widgets displayed on one of the web pages when the user selects a checkbox to indicate that they should be hidden

265