How to format CSS for 8.5x11 inch printed pages

Question

I am looking for help setting up the initial DIV that will fit within the borders of the letter paper. I'll loop for dynamic page content ending each page with `page-break-after; always;.

I've been using the trial and error approach and have now run out of paper to trial with.

How do you setup the div container where positions relate to the paper margins?

Thank you!

Answer 1

After using a CSS reset template, and with "shrink to page" turned off in print options I am able to make a DIV that is 7" (about 670px) wide and 9.5 (about 900px) high. I can position inside this box.

It translates fine between the printers I have connected. If my calculations are correct, the print DPI is about 95ppi.

#printPage
{
  margin: 0px;
  padding: 0px;
  width: 670px; /* width: 7in; */
  height: 900px; /* or height: 9.5in; */
  clear: both;
  background-color: gray;
  page-break-after: always;
}

Then positioning like this works:

#cube
{ 
  position: relative;
  top: 1in;
  left: 1in;
  width: 1in;
  height: 1in;
  background-color: white;
}