How can I position something in the margin beside text?

Question

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.

Answer 1

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.