@media print div: How to solve overlapping page text on header?

Question

I am using @media to print a header on each page when printing a screen in page in Firefox. I have my css set up like this:

@media print {
    div.printDivHeader {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.0em;
    position: fixed;
    display: block;
    width: 100%;
    height: auto;
    top: 0;
    }
}

The problem is the content of the second page overlaps with the print div header. (i.e., on the second page, the header doesn't force the page contents down, and so I get text written over text). Is there some way to handle this?

Answer 1

Add this to your Header media rule: bottom:3em; modifying the 3em in order for the content to fit.

Then add a separate div selector to the rule for your content area:

div.printDivContent {
    position: relative;
    width: 100%;
    top:3em;   //match size of header
    left:0px;
    right:0px;
}