Question

I have a newsfeed/chat box. Each entry contains two spans: #user and #message. I would like #user to float left, and #message to float left upon it. If #message causes the row to exceed the container width, #message should wrap below #user, as shown in the diagram below.

By default #message jumps completely beneath #user if it does not fit on the same row.
I have tried whitespace:nowrap on each element but that doesn’t seem to do the trick either.

Help?

Answer 1

Maybe I’m missing something, but if both elements are display:inline this should solve the problem of #message going completely beneath #user. No need to float anything.

Demo (not much to see): http://jsfiddle.net/YK3R9/

Feel free to use semantic markup instead of spans and divs, I just used them for the demo.

If you need the border on message to display the way it is in your drawing, just say so. I wasn’t sure if it was a visual aid or the way you actually want it rendered. Simply adding the border to the element looks a bit weird when the message spans multiple lines, so we might need a helper span.

EDIT: Saw your note that borders don’t matter.

Moral of the story: No need for float here.