I'm trying to set up a display using HTML and CSS that will render a chat discussion in the standard chat format. By this I mean that it is essentially a list of messages. Each message has two parts: a username and a message. The username will always stay in the top left of each message area and the message will always be floated left just to the right of the username. So it will look like this:
Jack: Did you see the race today?
However, it's important also that the message wraps down in such a way that keeps the username in the exact same spot but extends the message area down to accommodate the two-line message.
Jack: Did you see the Le Mans race
today? I heard that it was really
Jim: No I didn't.
I've preliminarily come up with an idea of how to do this, but I'm not sure how to format it properly or if it's the most logical or render-friendly. Essentially, I'm currently using an unordered list with list items for each username-message pair and using the float property to line them up. This is not really working very well. I'm a relative novice at CSS, so any help would be greatly appreciated. The relevant code is attached.
<div class="message">Stuff happens all the time.</div>
<div class="message">Oh really.</div>