Format a HTML document into multiple A4 size sections

Question

This is my current problem.

I want to generate a HTML page, which contains about 40 coupons. Each coupon must be with one A4 sized section.

So, if I were to print the HTML document, I would like each printed page to contain 1 coupon.

Ideas on how I could accomplish this ?

Answer 1

The following CSS should achieve what you need, subistitute the class name for whatever is appropriate for your DOM structure

 @media print {
  .coupon-class 
  {
   page-break-after:always;
  }
 }

This will always insert a page break after the element you can also use page-break-before to achieve a page break before an element.

Answer 2

You'll never get a very precise solution using HTML, as every browser decides its way of printing HTML is best and adds all sorts of headers and footers that change the page dimensions and how the clients printer actually prints it.

You would be better off generating a PDF of your coupons which you can easily do with PHP extensions.