CODEWITHSUNDEEP
htmlcss
Ed R
Ed R

Reputation: 2179

Create/Align Columns in CSS without using tables

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.

Upvotes: 2

Views: 2920

Answers (2)

Michael Rader
Michael Rader

Reputation: 5967

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.

Upvotes: 3

sczizzo
sczizzo

Reputation: 3206

Use code, pre, (and var, span, div) and friends. pre and code gives you whitespace-sensitive, fixed-width text, so the columns work just like above (in fact, you could just view source or inspect element). StackOverflow seems to use Google Prettify to do highlighting if you need that.

Upvotes: 1

Related Questions