I have a document basically formatted like so:

<div id='toc'>
  <h2 id='tocHeader'></h2>
  <ul id='tocItems'>
    <li><span>Some Page</span><span class="pageNum">1</span></li>    
    <li><span>Another Page</span><span class="pageNum">2</span></li>    
    <li><span>Whatever Page</span><span class="pageNum">3</span></li>    
  </ul>
</div>
<div class='page'>
  <h2 class='pageHeader'>Some Page</h2>
  <div class='pageContent'>
     <div>whatever</div>
    <div class='pageNum'>1</div>
  </div>
</div>
... div.page's for each page...

I'm basically trying to print this content in as much of a book-like fashion as possible - where the Page Numbers are at the bottom of the appropriate pages... but I realize these "Page Numbers" as I'm calling them are actually more like "Article Number" as there's really no guarantee that each one will only be a single physical page long.

So I guess I'm struggling to understand how one might format such content with an appropriate TOC and true page numbers in the footer of each page.

I have control of the generation of the HTML so I'm open to suggestions.

My first thought was to simply try and reference the closest div.pageNum value with javascript or something and place it in the footer of the page, but I really don't think that's going to work (plus I can't figure out how to reference the div I'm currently in).

Any ideas or suggestions would be greatly appreciated-

Thanks-

Page numbers can be accessed directly, using counter(page), which is probably what you need.

Thanks, Mike.

I actually found the Oliver Twist example a little while ago and it's been extremely helpful in demonstrating the dynamic creation of a TOC that accurately reflects the related page numbers.

I think that's definitely the way to go for me.

Thanks again-