How do you indent subsequent lines of text using <span>

Question

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!

Answer 1

Here is a solution widthout changing your HTML structure:

Demo

CSS:

.messageContainer {
    display: table;
    table-layout:fixed;
}
.time {
    display:table-cell;
    width:70px;
    vertical-align:top;
}
.nickname {
    display:table-cell;
    width:70px;
    vertical-align:top;
}
.message {
    display:inline-block;
    text-indent:70px;
    margin-left:-70px;
}

HTML:

<div class="messageContainer">
    <span class="time">10:00</span>
    <span class="nickname">Tom:</span>
    <span class="message">test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message test message </span>
</div>