Как мне обернуть плавающий промежуток под другим плавающим промежутком, внутри плавающего промежутка [диаграмма включена]?

Question

У меня есть лента новостей / чат. Каждая запись содержит два диапазона: #user и #message. Я бы хотел, чтобы #user плавал влево, и #message плавал влево. Если #message заставляет строку превышать ширину контейнера, #message должен обернуться ниже #user, как показано на диаграмме ниже.

По умолчанию #message полностью переходит под #user, если оно не помещается в той же строке. Я пробовал пробельные символы: теперь оборачивать каждый элемент, но это тоже не помогает.

Помощь

Answer 1

Может быть, я что-то упускаю, но если оба элемента display:inline, это должно решить проблему с #message, идущим полностью под #user. Не надо ничего плавать.

Демо (не особо): http://jsfiddle.net/YK3R9/

Не стесняйтесь использовать семантическую разметку вместо span и div, я просто использовал их для демонстрации.

Если вам нужно, чтобы граница сообщения отображалась так, как она есть на чертеже, просто скажите об этом. Я не был уверен, была ли это визуальная помощь или то, как вы на самом деле хотите, чтобы она была оказана. Простое добавление границы к элементу выглядит немного странно, когда сообщение занимает несколько строк, поэтому нам может понадобиться вспомогательный интервал.

РЕДАКТИРОВАТЬ: увидел ваше замечание, что границы не имеют значения.

Мораль истории: Нет необходимости в float здесь.