Multi-Page invoice printing on one page

Question

I have an invoice that contains over 100 lines of product that I am trying to print. This single invoice should take over 3 pages, but when printed, the content flows off the footer and the next page is the following invoice.

I am using divs instead of tables, and I can't understand why the long invoices will not print on multiple pages.

Any ideas?

Here's my stylesheet:

h1,h2,h3 { margin: 0 0 0.5em 0; padding: 0;}
body { font-family: sans-serif; font-size: 0.8em; }
label, legend { font-weight: bold; }
pre { font-family: sans-serif; }

shipping_address {
  width: 45%;
}

billing_address {
  width: 45%;
}

order_info {
  padding: 0 10px;
}

shipping_logo {
  width: 115px;
}

content {
  margin: 0px auto 0px auto;
  width: 100%;
  padding-bottom:15px;
}

div.container {
  display: table;
  width: 100%;
}
div.header {
  display: table-row;
  text-align: center;
}
div.row {
  display: table-row;
}

.even {
  background: #CCCCCC none repeat scroll 0 0;
}

div.cell {
  display: table-cell;
  padding: 0 10px;
}

Answer 1

We're going to need much more information than what you have suggested to really tackle this problem.

However, a pretty blind stab at something that would cause a similar behavior is if you had something set such that the height is 100%, whether it's a table, a div, or something. This is sometimes done to try and keep a footer at the bottom of the browser window and if you do that, this can cause this behavior when printing.

Answer 2

You might want to specify specific stylesheets for printing. For example,

 @media all
 {
.page-break { display:none; }
 }

@media print
 {
.page-break { display:block; page-break-before:always; }
 }

You can then apply the page-break class where you want to page to break. This article has a few neat tricks to format a page for printing.