I have two divs - one is fixed as the header for all pages, and the other is for content. Here is my code:
<style>
#print-head {
display: none;
}
@media print {
#print-head {
display: block;
position: fixed;
top: 0pt;
left: 0pt;
right: 0pt;
text-align: center;
}
}
</style>
<div id='print-head'>
Page header here for all pages.
</div>
<div id='content'>
Content here coming from a foreach loop.
</div>
My problem is that the content in the div gets many lines in the print preview. On the first page, everything looks correct with the header and content displayed properly. However, on subsequent pages, the content overlaps with the header.
I need a way to ensure that the content div always has a margin from the top on every page, not just the first. How can I clear the margin between the first div and the second div on each page? Thank you.