title: I need to create a report in HTML, that is A4 size, how can i do that?
body: <p>I need to make a report in HTML that is supposed to be A4 size exactly.  It needs headers and footers.  Surely this can be done with css yeah?</p>
  
  <p>does anyone have any examples or sample code for this?</p>
  
  <p>I googled and the code snippets I got all talk about media queries and they don't work..</p>
  
  <p>so basically it is for print Purposes, the html generated will be converted to a PDF document.
  I am using MVC4 and found a tool that will convert a view to a PDF.  A view is just pure HTML.  So I thought why not style the HTML to represent the output report, then PDF it.</p>
  
  <p>So I need the ability to have a header, and a footer (bottom of the page) and then content in the middle of both of them</p>
  
  <p>I tried using the following code, but it doesn't seem to work..</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css" media="all"&gt;
          @page {
              size: A4 portrait; /* can use also 'landscape' for orientation */
              margin: 1.0in;
              border: thin solid black;
              padding: 1em;
  
              @bottom-center {
                  content: element(footer);
              }
  
              @top-center {
                  content: element(header);
              }
          }
  
          #page-header {
              display: block;
              position: running(header);
          }
  
          #page-footer {
              display: block;
              position: running(footer);
          }
  
          .page-number:before {
              content: counter(page); 
          }
  
          .page-count:before {
              content: counter(pages);  
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="page-header"&gt;
          &lt;p&gt;Header text&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="page-footer"&gt;
          &lt;p&gt;Footer text&lt;/p&gt;
          &lt;p&gt;Page &lt;span class="page-number"/&gt; of &lt;span class="page-count"/&gt;&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="page-content"&gt;
          &lt;p&gt;Page 1.&lt;/p&gt;
  
          &lt;p style="page-break-after:always;"/&gt;
  
          &lt;p&gt;Page 2.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>