Formatting an HTML document into several A4 sections
The following CSS should do what you want, substitute the class name for whatever fits your DOM structure
@media print {
.coupon-class
{
page-break-after:always;
}
}
This will always include a page break after the element, which you can also use page-break-before
to achieve a page break before the element.
source to share
You will never get a very accurate solution using HTML, as each browser decides how best it prints HTML and adds all sorts of headers and footers that resize the page and how the printer actually prints it.
You would be better off generating a PDF of your coupons, which you can easily do with PHP extensions.
source to share
You can follow these steps:
- Define
width:100
for each coupon in its css styles. This will use the maximum width of your paper. - Use
page-break-after:always
in CSS properties for each coupon. This will make the next coupon appear on the next page. (Http://msdn.microsoft.com/en-us/library/ms530842 (v = vs .85) .aspx)
Remember to be careful about the height of your coupons. Try not to put many lines in them.
You can use tag <fieldset>
for each coupon and apply css properties to it.
source to share