title: Leave space at the top of every printed page
body: <p>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.</p>
  
  <p>Example code:
  HTML</p>
  
  <pre><code>&lt;header&gt;This should be at the top of every printed page&lt;/header&gt;
  &lt;section id="content"&gt;*Multiple pages of text*&lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>header {
  position:fixed;
  top:-10;
  height:20px;
  }
  
  #content {
  left:0px;
  overflow:visible;
  position:relative;
  /*top:52px;*/
  width:98%;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Note: I'm open to javascript or jquery solutions if one exists.</p>