Это пример на сайте W3schools, адаптированный для плавающего текста. Изменения в строках 4 и 20.
<html>
<head>
<style type="text/css">
div
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
In the paragraph below, the image will float to the right. A dotted black border is added to the image.
We have also added margins to the image to push the text away from the image:
0 px margin on the top and right side, 15 px margin on the bottom, and 20 px margin on the left side of the image.
</p>
<p>
<div>This is floated text. This is floated text. This is floated text.</div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Вы также можете использовать <div style="float:right">text</div>, если не хотите плавать каждый элемент div.
Редактировать: чтобы получить плавающий текст на полпути вниз по странице, просто вставьте <div style="float:right">This is an annotation</div> прямо в середину блока <p>.