title: Standard way to put running elements in CSS 3
body: <p>What is the correct way to put Header and Footer in CSS 3 ?
  I am reading up on <a href="http://www.w3.org/TR/css3-gcpm/" rel="nofollow">http://www.w3.org/TR/css3-gcpm/</a> and I would like to know if the below is the correct interpretation of how to use running elements .</p>
  
  <p><strong>Running elements has the property of being shifted from the normal "flow" of the document and headers and footers need that .</strong> </p>
  
  <p>That is the significant part I am trying to achieve and , otherwise there is a string-set attribute which can be used to name a section and use it elsewhere int he page margins . 
  I am also curious if 3rd party implementations support them ? I know of some similar markup's in some tools but I want to know if this is what CSS is trying to mean? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;Testing&lt;/title&gt;
  &lt;style type="text/css"&gt;
  div.header {position: running(header)}
  div.footer {position: running(footer)} 
  @page{
           @top-center {content: element(header)}
           @bottom-center {content: element(footer)}
       }    
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="header"&gt; HEADER &lt;/div&gt; 
  &lt;div class="footer"&gt; FOOTER &lt;/div&gt;
  &lt;div&gt;
      Normal Text
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/VubtS/" rel="nofollow">http://jsfiddle.net/VubtS/</a> - But of-course browsers won't display that since it is for paged media .</p>
  
  <p><em>I am trying this in some HTML - PDF convertes to see how much they comply with CSS 3 but apparently none of them renders this . Is my markup correct as per the Css3 definition ?</em> </p>