Css-styled Paragraphs With Paragraph Numbering And Sidenotes

I'm wanting to put a text on the web with paragraph numbers and sidenotes. I'm using Huckleberry Finn as a test: see http://jsfiddle.net/29Mdt/. I'd like to have the paragraph numb

Solution 1:

One approach:

.chapter {
    counter-reset: paragraph;
    padding-left: 20px;
}
.pagep {
    width: 400px;
}
.pagep:before {
    position: absolute;
    margin-left: -20px;
    color: #CCC;
    content: counter(paragraph);
    counter-increment: paragraph;
}
.sidenote {
    position: absolute;
    margin-left: 420px;
    font-size: 14px;
    color: #E22;
    width: 100px;
}

HTML:

<bodyclass="chapter"><divclass="page"><h1>Tom Sawyer</h1><p>You don't know about me...</p><!-- sidenote to the paragraph following the aside tag --><asideclass="sidenote">The widow she cried over me...</aside><p>Now the way that the...</p></div></body>