title: flying saucer page number + page count
body: <p>I'm trying to configure a nice footer on a pdf document I'm generating using Flying Saucer.
  But I'm having problems getting the page number and page count in a nice position.</p>
  
  <p>Consider this bit of css:</p>
  
  <pre><code>div#page-footer {
      position : running(footer);
      // ..  more styling .. //
  }
  div.page-number:before {
      content: counter(page);
  }
  </code></pre>
  
  <p>Using this bit of html will not give me a page number:</p>
  
  <pre><code>&lt;div id="page-footer"&gt;
      &lt;div class="page-number"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The only way I manage to get a page number if I move the class a level up.</p>
  
  <pre><code>&lt;div id="page-footer" class="page-number"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this does not allow me to add additional content in the footer or makes it really difficult to apply styling. I could add a separate footer just for the page number, but it would be quite hard to get the position just right.</p>
  
  <p>Is there a way to get page number + page count in a footer that also contains other elements and styling?</p>
  
  <p>Extra notes:</p>
  
  <ul>
  <li>I simplified the footer a bit, in the original there is more in there, but even this simple example it is giving problems.</li>
  <li>using span or div for the element does not make a difference.</li>
  </ul>