0

I have an HTML page with around 1000 similar divs.

What I want to do in this situation is, to fit two of those on one A4 page when the user wants to print the page, something like the 'Fit to Page' feature.

If it matters, the page is generated using PHP.

Any leads on how I could do it?

Thanks in advance.

Vidul Talwar
  • 23
  • 1
  • 10
  • Are you assuming that 2 divs will always fit on 1 A4 page without changing font size? In other words the content is known and 2 divs will never overflow an A4 page. – JohnC Oct 13 '18 at 09:10

2 Answers2

0

Try this out. The size of A4 in 300ppi is 2480 x 3508 take a main div with CSS :

.main{
display grid;grid-gap:10px;
grid-template-columns:repeat(auto-fill,minmax(1734px,1fr);
/* 1734 = 3508/2 -20px for grid-gap */
}

let me know weather it worked. Its just based on theory.

Kalpesh Shende
  • 122
  • 7
0

I am assuming the content of 2 divs always fits on an A4 page without changing font size.

Based on CSS to set A4 paper size.

Added css to add page break every 2 divs.

I used printing to pdf file in Firefox as a quick printer free way to check layout.

<!DOCTYPE html>
<html>
<head>
<style>
/* 
based on 
https://stackoverflow.com/a/30345808/1692270 *

then added css to add page break every 2 items
*/

/*ie last in every group of 2*/
/*page break every 2nd item */
div:nth-of-type(2n-0) {
    background: red;
    page-break-after: always;
}
/*ie 1st in every group of 2*/
div:nth-of-type(2n-1) {
    background: blue;
}

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

</style>
</head>
<body>

<div>The first div.</div>
<div>The second div.<br>more stuff here</div>
<div>The third div.</div>
<div>The fourth div.</div>
<div>The fifth div.</div>
<div>The sixth div.</div>
<div>The seventh div.</div>
<div>The eight div.</div>
<div>The ninth div.</div>
<div>The 10th div.</div>
<div>The 11th div.</div>
<div>The 12 div.</div>
<div>The 13 div.</div>
<div>The 14 div.</div>
<div>The 15 div.</div>
<div>The 16th div.</div>
<div>The 17th div.</div>
</body>
</html>
JohnC
  • 2,687
  • 1
  • 22
  • 30