Проблема с плавающими sidenotes в CSS

Question

Я пробую плавающие sidenotes, которые врезаются в основную часть текста.Вы можете видеть, что у меня есть здесь и (как jsfiddle) здесь .

У меня проблемы с двумя ограничениями, которые я пытаюсь удовлетворить одновременно:

• Заставьте sidenotes выровняться с цитированием в тексте: например, верхний индекс '1' в основном тексте и верхний индекс '1' в sidenote должны выровняться горизонтально.
• Дайте sidenotes требуемый отступ, так чтобы любые строки основного текста, попадающие в отступ, были сокращены.

В настоящее время я удовлетворяю второму ограничению, но это мешает мне удовлетворить первоеограничение.Кто-нибудь знает, как удовлетворить оба сразу?Спасибо!

РЕДАКТИРОВАТЬ: Здесь это небольшое изображение, иллюстрирующее основную идею.Я просто хочу, чтобы что-то похожее на старомодные тексты в старых текстах.

Answer 1

Вы можете добавить стиль top к своему правилу floatnote:

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/

Проверено только в Chrome