Leave space at the top of every printed page

Question

So, I have a header that needs to appear at the top of every page when the user prints this website. I'm setting position to fixed to get it to appear at the top of every page, but the problem is that the header is now overlapping some of the content near the top. The header is a static size, so if I could just put a margin X number of pixels at the top of every page that would solve my problem, but I can't find a way to do that. Thanks.

Example code: HTML

<header>This should be at the top of every printed page</header>
<section id="content">*Multiple pages of text*</section>

CSS

header {
position:fixed;
top:-10;
height:20px;
}

#content {
left:0px;
overflow:visible;
position:relative;
/*top:52px;*/
width:98%;
}

The "top:52px" worked to get the content to avoid the header, but it was also causing some lines of text to be cut off in the middle by a page break, which is why it's commented out.

New info: Something interesting I discovered about the "top:52px" line: it's not actually moving the content down 52 pixels, it's somehow hiding the top 52px of content on every page. I noticed this when I set header display to none and noticed significant portions of my content still missing.

Note: I'm open to javascript or jquery solutions if one exists.

Answer 1

Finally figured this out:

#content {
   position:relative;
   display:table;
   table-layout:fixed;
   padding-top:20px;
   padding-bottom:20px;
   width: 94%;
   height:auto;
}

This puts padding at the top and bottom of every page, does not cut any content off from the top or bottom, and allows #content to respect width adjustments so that content doesn't get cut off on the right side of the page.