Сжать границу HTML-элемента, который делит пространство с плавающим элементом. ⇐ CSS

[Anonymous]

Когда плавающий элемент занимает некоторое пространство, «обычный» текст освобождает место для размещения плавающего элемента. Но граница вокруг обычного текста этого не делает, а вместо этого пересекается с плавающим элементом.
В примере ниже, как я могу сделать так, чтобы первое красное поле заканчивалось до того, как синее поле начнется с некоторым пробелом , а не перекрываться? И пусть второй красный прямоугольник, которому не нужно делить пространство с плавающим элементом, все равно занимает 100%?

Код: Выделить всё

div#toc {
float: right;
width: 300px;
padding: 20px;
border: 1px solid blue;
}

div.warn {
padding: 20px;
border: 1px solid red;
}

Код: Выделить всё

Table of contents
[list]
[*]Chapter 1
[*]Chapter 2
[*]Chapter 3
[/list]

Chapter 1
In the beginning ...

Fairy tale, watch out!

... and were married happily ever after.

Don't retell!

Подробнее здесь: https://stackoverflow.com/questions/784 ... ng-element