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!

Solution

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>

Comments

[Nick]

having multiple spans with same id="time" is invalid

[Arbel]

@NikolaMitev Right, it is going to be repeated, I updated the answer.

[fanfare]

Hey Arbel, I'm experimenting with this and I've run into a slight snag. It might not be an issue if I can change the maximum number of characters in a 'nickname' but if everyone has different letters of names, and instead of Tom someones name was like Testaosdifjaosidfjaoisd (silly example) would it be possible to somehow force the 'nickname' cell to do overflow:hidden do that it retains the 70px width? For some reason, I cant seem to like force that span to have a fixed width. Edit: 'max-width' will do the trick

[Arbel]

@user1975224 Yes max-width will do the trick, also with overflow: hidden; you can apply text-overflow: ellipsis; to the .nickname class to make it more elegant.