如何从重新定位的浮动div中折叠空白？

Question

I'm trying to make side notes for site, but if I use absolute positioning, when two citations are too close to each other, they will overlap. Using relative positioning, pushing the side note into the sidebar area of the page leaves white space behind, forcing the paragraph's text to wrap around the white space; is there a way to collapse that white space using JavaScript?

Or is there a different/better way to get the same effect using JavaScript?

It is crucial that the side notes are alongside the citation -- not hidden and shown with JavaScript individually or simply listed separately like footnotes would be. And simply avoiding having citations that are too close is not an option.

Fiddle

HTML:

<div id="main_column" class="grid_3 alpha omega">
    <p class="bodycopy">Donec ultricies massa vel dui lobortis, et ornare augue volutpat. Proin aliquam nec orci ut consequat. Donec sapien libero, tincidunt quis arcu vitae, hendrerit commodo neque.<sup>1</sup><small><strong>1</strong> Side note test. In imperdiet nibh turpis,
    eu scelerisque nisi sagittis eu. Fusce lectus tellus, pretium in venenatis eget, faucibus ac 
    eros.</small> In imperdiet nibh turpis, eu scelerisque nisi sagittis eu. Fusce lectus tellus, pretium in venenatis eget, faucibus ac eros.<sup>2</sup><small><strong>2</strong> Side note 
    test. In imperdiet nibh turpis, eu scelerisque nisi sagittis eu. Fusce lectus tellus, pretium 
    in venenatis eget, faucibus ac eros.</small> Phasellus nec efficitur magna.…</p>
</div>

And the relevant CSS:

small {
    position: absolute;
    display: block;
    font-size: 14px;
    font-family: BrandonGrotesque, Helvetica, Verdana, Arial, sans-serif;
    top: auto;
    margin-top: -28px;
    margin-left: 640px;
    width: 260px;
    height: auto;
}

Answer 1

Your requirements are tough. For example - what will you do if you have two citations that occur on the same line?

There might be a javascript solution to calculate the position of things and move them to an appropriate spot. I know that it's possible but I'm not the right guy to clearly write or explain it.

I think you can reduce the cases where you might have to compromise with smaller text and line-height:

small {
    font-size: 12px;
    line-height:110%
}

That would make them overlap less often, but to really do this right you need to figure out what you will do when two citations are on the same line. Aside from some kind of css hover/hide effect I think the only way is with some non-trivial javascript figuring out where to put things.