Problem with floating sidenotes in CSS

Question

I'm trying out floating sidenotes that cut into the main body of a text. You can see what I have so far here and (as a jsfiddle) here.

I am having trouble with two constraints I am trying to simultaneously satisfy:

• Make the sidenotes line up with the in-text citation: e.g., the superscript '1' in the main text and the superscript '1' in the sidenote should line up horizontally.
• Give the sidenotes the padding they need, so that any lines of main text that run into the padding are shortened.

Currently, I am satisfying the second constraint, but this keeps me from satisfying the first constraint. Does anyone know how to satisfy both at once? Thanks!

EDIT: Here's a little image illustrating the basic idea. I just want something like behaves like old-fashioned sidenotes, in old texts.

Answer 1

You can add a top style to your floatnote rule:

floatnote {
    position: relative;
    background:white;
    top:-20px;  // ADD THIS
    padding: 20px 0px 10px 15px;
    display: block;
    width: 150px;
    clear: right;
    float: right;
}

http://jsfiddle.net/jasongennaro/ffYEK/3/

Only tested in Chrome