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

Something with position: fixed; never pushes static (or relative) content. Either there is styling to ensure they do not overlap… or they overlap.
See this example JSFiddle, which uses your css.

The problem lies somewhere else.
How does the header not overlap with the text in the first page? Do you have something pushing the text down? Margin-top? What?

Is it possible to share either the original or a simplified example? (You can use JSFiddle.)