I'm working on applying CSS to a friend's web chatroom application.
Below represents the current situation, and what I'd ideally like to happen.
The HTML I have to work with is pretty simple, and there's 3 elements I have to work with, 'time' 'nickname' 'message' .
This is how each line of chat is produced:
<div><span id="time">10:00</span><span id="nickname">tom</span><span id="message">message</span></div>
This is definitely not the most pragmatic HTML, and I think a better solution would be to wrap each line in a table, where 'time' would be a column and 'nickname' and 'message' would be in another column. But I'm curious if this sort of thing could be accomplished purely with CSS and the HTML I have to work with right now. I've gotten close by having each span have "display:table-cell"..e.g.
<div><span id="time" display:table-cell>10:00</span><span id="nickname" display:table-cell>tom</span><span id="message" display:table-cell>message</span></div>
but.. the message wraps aligned to the message, and I'd like for it to wrap underneath the nickname. Any css trickery ideas that will produces the effect I'm looking for?
Thanks!