文字旁注浮动

Question

这是我正在尝试实现的布局，红色div是右侧浮动的侧边音符。我得到浮动部分工作，但由于div为relative，我确实在文本（红色轮廓）中有间隙。如何为div（顶部偏移）指定坐标，并且没有其在流动中的原始位置的间隙？或者将div放在流程中所需的位置，这是解决这个问题的唯一方法吗？

    #article {
        float:left;
        width:100%;
    }

    #sideNote {
        position:relative; // produces gap but I'd like to assign offset
        float:right;
        width:35%;
        background:red;
    }

<div id='article'>
   ....
   <div id='sideNote'>
     ....
   </div>
</div>

主要的是，为了将top:xxem分配给红色div，我需要它具有坐标矩阵，这只能通过从我理解的position中分配absolute来实现。{{1在这种情况下不起作用，因为它不提供文本周期，relative在原始流程中留下空白

Answer 1

我更新了@timspqr的小提琴，这可能就是你要找的东西。

您可以使用calc

管理备注的drop％

演示：http://jsfiddle.net/FcsBb/5/