How can I position something in the margin beside text?

I have some HTML taken from an originally printed document. It has some page numbers:

<span class="page">42</span>

sprinkled in the middle of paragraphs where the original document had page breaks (for no semantic reason, but just because that's where the end of the page happened to开发者_运维百科 fall).

Right now I've just hidden them. But I'd like to float the page numbers to the left or right of the text. It might look like this:

    ...
    random text. It has roots in a piece of classical Latin
    literature from 45 BC, making it over 2000 years old.
    Richard McClintock, a Latin professor at Hampden-Sydney      42
    College in Virginia, looked up one of the more obscure
    ...

Not hard with jQuery, but can I achieve this effect with plain old CSS? It looks like the CSS float property always puts things inside the enclosing block, not in the margin.

A couple of ways come to mind:

.page
{
    float: right;
    margin-left: 100px;
}

or possibly this would work better:

.page
{
    float: right;
    margin-right: -100px;
}

or maybe, if there is a <p /> tag surrounding the actual paragraphs,

p
{
    position: relative;
}
.page
{
    position: absolute;
    right: -100px;
    top: 0;
}

It's hard to be sure what will work best given the document you have, but those are a few ideas to get you started.