Wie kann ich eine schwebende Spannweite unter einer anderen schwebenden Spannweite innerhalb einer schwebenden Spannweite umbrechen [mit Diagramm]?

Question

Ich habe eine Newsfeed/Chat-Box. Jeder Eintrag enthält zwei Abschnitte: #Benutzer und #Nachricht. Ich möchte, dass #user links schwebt, und #message links darüber. Wenn #Nachricht bewirkt, dass die Zeile die Containerbreite überschreitet, sollte #Nachricht unter #Benutzer umbrechen, wie im folgenden Diagramm gezeigt.

Standardmäßig springt #message komplett unter #user, wenn es nicht in dieselbe Zeile passt. Ich habe versucht, whitespace:nowrap auf jedes Element, aber das scheint nicht zu tun, den Trick entweder.

Hilfe?

Answer 1

Vielleicht übersehe ich etwas, aber wenn beide Elemente display:inline Dies sollte das Problem lösen, dass die #Nachricht vollständig unter dem #Nutzer verschwindet. Es ist nicht nötig, etwas zu schweben.

Demo (nicht viel zu sehen): http://jsfiddle.net/YK3R9/

Es steht Ihnen frei, semantisches Markup anstelle von Spans und Divs zu verwenden, ich habe sie nur für die Demo benutzt.

Wenn Sie die Umrandung der Nachricht so haben wollen, wie sie in Ihrer Zeichnung dargestellt ist, sagen Sie es einfach. Ich war mir nicht sicher, ob es sich um eine visuelle Hilfe handelt oder um die Art und Weise, wie Sie es tatsächlich dargestellt haben möchten. Das einfache Hinzufügen des Rahmens zum Element sieht ein bisschen seltsam aus, wenn sich die Nachricht über mehrere Zeilen erstreckt, also brauchen wir vielleicht eine Hilfsspanne.

EDIT: Ich habe Ihren Hinweis gesehen, dass Grenzen keine Rolle spielen.

Die Moral von der Geschicht': Keine Notwendigkeit für float hier.