Printed pages featuring neatly organized two-column div layout

Forgive me if this question has already been asked, but I need some guidance:

I am designing reports using HTML and CSS which are then converted into PDF format. The report requires a two-column layout on most pages, so I am using:

<div class="two_columns">
  <p>A lot of text goes here...</p>
  <p>Multiple paragraphs as well...</p>
</div>

along with

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

However, for sections of the report that span multiple pages, the left column continues onto the second page, displaying about half the content before wrapping to the right column back on the first page. What I want is for the left column to wrap to the right column on the first page until it's filled with text, and then wrap to the left column on the second page (and display a similar amount of content in each column). Is there a way to achieve this without creating separate divs for individual columns or pages? The length of these sections varies based on the data being reported, making manual div creation impractical.

htmlcsspdfcss-multicolumn-layout

Answer №1

To begin, the height of the div must be specified before utilizing 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>

Access the JSFiddle link here.

For additional information on this topic, visit the source mentioned here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The CSS file is failing to recognize the changes made to the data-theme attribute in the HTML

Currently implementing a dark theme on my website involves adding a toggle switch to the footer.html page, which adds a variable named data-theme = 'dark' to the html. The scss files of the footer and core are adjusting accordingly based on the c ...

javascripthtmlcsssass

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

Display a Java applet when HTML text elements are clicked

I am attempting to create a custom jQuery plugin, but I don't have much experience with jQuery and could really use some assistance. Here is the Java Applet that I am referencing: The applet performs certain operations and displays the result in a t ...

jqueryhtmlapplet

Contrast the objects in views.py between two distinct model objects in Django

I am currently working on a feature that compares the skills required for different job postings (such as web development, marketing, etc) with the skills of a user who is logged in. If there is a match, the job posting will be displayed to the user. The ...

pythonhtmldjangodjango-viewscompare

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

javascripthtmlcss

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

javascriptjqueryhtmlajaxjson

Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...

css

Exploring the functionality of multiple index pages in angularjs

I am trying to access the localhost:3000/admin which is located in my views. The index.html and admin.html are two separate base files, one for users and the other for the admin dashboard respectively. Here is a snippet from my app.routes.js file: angul ...

javascripthtmlangularjsangular-routing

"Unable to Access Account: PHP Login Script Failing to Log Users In

I've encountered a login issue with my website script that I can't seem to figure out. The script is designed to log users in after they input their username and password, but for some reason, even with the correct credentials, authentication fai ...

phphtmllogin-script

Developing a sliding menu with AngularJS

Currently, I am developing an AngularJS application. One of the features I am working on involves having a menu at the top of my page that, when an item is selected, will slide down to reveal content specific to that selection in the same area as the menu. ...

javascriptjqueryhtmlcssangularjs

Prevent the tab key from exiting the input field and instead direct it to a designated element on the webpage

I have customized a select menu for user interaction, but I am facing issues with normal keyboard behaviors not working as expected. Specifically, I want to enable tab functionality to navigate to my styled select menu just like when clicking tab to cycle ...

jqueryhtmlcssjquery-ui

Adjust the color of the text for the items in the drop-down field on the WooCommerce

https://i.stack.imgur.com/CHJUz.png It appears that the font color on my main website is white. However, on the WooCommerce Checkout Page, all drop down fields' items are also displayed in white, making it difficult for users to see the options witho ...

htmlcsswordpresswoocommercecss-selectors

spacing for margins of table elements generated dynamically

Despite setting the width for the td tag, there seems to be a significant gap between the Odo and Location columns. Below is a basic table structure: <table width="95%" border="0" cellspacing="0" cellpadding="2"> <tr> <td wi ...

javahtmlmarginpadding

CSS selector that targets an element exclusively when it contains solely another element, devoid of any additional text

Is there a CSS selector that can target an element, like <p>, with only a specified child element, such as <a>, within it and nothing else? For instance: <p><a>Some text</a></p>. I want to avoid selecting elements like & ...

htmlcssbeautifulsoup

varying heights in bootstrap columns

My goal with utilizing the grid system of Bootstrap 3 is to achieve the following visual layout: View my envisioned image here. However, when using the normal row and col structure, I end up with a different result: See what I actually get here. Is there ...

htmlcsstwitter-bootstrap

Looking to implement a CSS effect that will hide content without removing the space it occupies on the page?

Is there a way to hide specific buttons within the right column of a 3-column table display? I am currently utilizing jQuery to achieve this function. The purpose behind hiding these buttons is to prevent any quick clicks that might interfere with the fa ...

javascriptjqueryhtmlcsshide

Is there a way to achieve a full-page inset shadow using absolute positioned elements?

Currently, I am facing a challenge with a page that has an inset box shadow on the body element. When there are absolute and relative positioned divs on the page that expand enough to generate a scrollbar, the box shadow is cut off even when the height is ...

htmlcss

Can you suggest a more effective method for changing the color of buttons?

While the title provides some context, allow me to elaborate further. I've been working on a website for quite some time now. Each section of the website features 3 buttons, each highlighted in a unique color. My question is, is there a more streamlin ...

htmlcssbutton

After the page is reloaded, apply a class to the divs by selecting them based on the "data" attribute

I have a set of four cards labeled "card", each representing different body parts: eyes, torso, arms, and legs. <div class="card" data-lesson="eyes">eyes</div> <div class="card" data-lesson="torso">torso</div> <div class="card" ...

javascriptjqueryhtmlcsslocal-storage

Ways to set up various Content-Security-Policies and headers in your application?

In my email application, I am trying to prevent alerts in JavaScript by using a CSP header. However, even with the current policy in place, alerts can still execute when I send an HTML document attachment that contains script tags. Changing all JavaScript ...

javascripthtmlsecurityxsscontent-security-policy