Question

I have a unique design question. Basically I’m writing a chat script and would like to make the layout more uniform. Is it possible to have a unique set of columns per chat line without creating a new table for each line? For instance this is the design I am ideally looking for.

    [TimeStamp] Me: I am writing a long message and this text will be
                    wrapped to the next line. See how the message text
                    is aligned perfectly when wrapped?
    [TimeStamp] Them: When they write a message that requires wrapping
                      it aligns perfectly for them.
    [TimeStamp] OtherPeople: I think this makes the concept clear if it
                             needs wrapping it aligns for each "poster"

If I create 1 table for all the messages it may make certain columns longer than they should be. I know creating a new table for each new post could accomplish this, just wondering if there is a more “Web 2.0” CSS way of doing this. Any help is appreciated.

Answer 1

Instead of using a table use divs for the poster name and the text.

so:

<div id="everything"><div id="everythingInside">
<div id="timestamp">[timestamp]</div>
<div id="poster">TheCoolGuy</div>
<div id="comment">I"m cooler than you!</div>
</div>
</div>

then use css to display it as a table:

#everything { display: table; }
#everythingInside { display: table-row; }
#timestamp, #poster, #comment { display: table-cell; }

Of course there are other ways using divs and further CSS as well.