0

I need to print a page with a fixed size, and an absolute position div inside:

.page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

Media classes to print:

@page 
{
    size: A4;
    margin: 0; 
}

@media print {
   .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    position: relative;
  }
}

The div:

<div id="proc_comp">Printed by Computer</div>

#proc_comp
{
   position: absolute;
   left: 190px;
   bottom: 15px;
   font-size: 0.65em;
}

But the div, when I try to Print in the Browser, it does not appear in the same place as the HTML layout, why?

Thanks.

Patrick
  • 2,995
  • 14
  • 64
  • 125

1 Answers1

0

The wrong positioning appears because you are using pixel-based placement inside your #proc_comp rule whereas the page is using A4 format (non-pixel based layout). You may try to use following alternative

#proc_comp {
  position: absolute;
  left: 50%;
  top: 50px;
  margin-left: -5em;
  margin-top: -1em;
}

You may have to play around with the negative margins to fit the height and width of your displayed message to make it appear centered.

SaschaM78
  • 4,376
  • 4
  • 33
  • 42
  • Hi thanks, maybe I can use the size of the page in px? – Patrick Mar 03 '14 at 17:57
  • @Patrick I would never mix pixel and print sizes, because there are some unpredictable factors like dpi settings and such that may have an impact on the calculation. Try using "pt" instead of "px" like I did in this jsFiddle: http://jsfiddle.net/Moonbird_IT/N5S5A/ (use "Print" on the lower right panel to see the positioning). – SaschaM78 Mar 03 '14 at 19:05
  • What about using only px has I have all the elements placed in the page using px? Can I transform cm in px and solve the problem? – Patrick Mar 04 '14 at 15:45
  • @Patrick there are a variety of similar discussions here on SO like [this one](http://stackoverflow.com/questions/320357/safe-width-in-pixel-for-printing-web-pages) or [this one](http://stackoverflow.com/questions/6389914/pixels-vs-points-in-html) that all somehow discuss best printing practises. [This great article](http://alistapart.com/article/goingtoprint) also offers a lot background info for designing printer-friendly CSS stylesheets, as a conclusion I'd say better prefer pt or percent and don't use pixels for print. – SaschaM78 Mar 04 '14 at 19:39