Hello,
I'm having a hard time trying to configure printed output that consists
of multiple pages. The idea is the following:
<div style="
border: 1px solid blue;
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
page-break-after: always;
">AA</div>
<div style="
border: 1px solid green;
position: absolute;
top: 30px;
left: 30px;
width: 80px;
height: 80px;
">BB</div>
<div style="
border: 1px solid orange;
position: absolute;
top: 30px;
left: 250px;
width: 80px;
height: 80px;
">CC</div>
The page-break-after does not work here because of the absolute
positioning. When I change 'absolute' to 'relative' in the code, then
the printed page breaks correctly between the <div>'s:
<div style="
border: 1px solid blue;
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
page-break-after: always;
">AA</div>
<div style="
border: 1px solid green;
position: relative;
top: 30px;
left: 30px;
width: 80px;
height: 80px;
">BB</div>
<div style="
border: 1px solid orange;
position: relative;
top: 30px;
left: 250px;
width: 80px;
height: 80px;
">CC</div>
The enclosing tags for the code are <body>...</body>. But this
construction is not clean and error-sensitive. Plus, the last <divis
displayed lower than the middle <div>, though they have identical
top-instructions (30px) (at least in MSIE).
As a last resort, I tried to format my print layout with a huge pixel
height across multiple pages; something like this:
<div style="
border: 1px solid blue;
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
">XX</div>
<div style="
border: 1px solid green;
position: absolute;
top: 1200px;
left: 30px;
width: 80px;
height: 80px;
">YY</div>
But I'm going over 50,000 pixels here and the absolute position becomes
unreliable/ugly across multiple printed pages. Especially because I'm
doing it on an old matrix pin printer with form feed.
Ideally I'm looking for a way to use absolute pixel positioning across
multiple printed pages, something like this:
<div "position:absolute;top:10px;left:10px;">AA</div>
[start new printer page + reset top&left settings to new page]
<div "position:absolute;top:20px;left:20px;">BB</div>
Any suggestions/workarounds ?
Thanks,
--
Bart
