[SOLVED] getting divs into shape for chat box layer

[ultrus]

Hello,

I'm preparing a chat box layer that sits on top of a page, without launching a new window. No worries on the functionality as I'm just trying to get the interface into shape right now.

 

I'm having the following issues with http://www.christopherstevens.cc/chat:

 

1. If a nickname is too long, it overlaps the message of that nickname (seen in link above). This is because I'm specifying the width of the nickname and message "columns". If I don't specify widths, the message shows up below any nickname instead of the right. Any thoughts on this?

 

2. If I have too much chat, it will break out of the box. Should I be placing the chat history window in an iframe?

 

3. As an alternative to using an iframe, I though about limiting the number of "lines" are displayed at one time. The problem is I can't count lines as some messages are longer than others. I can limit number of characters, but then chat gets lost as lines are eliminated. Perhaps a solution is to create a "view entire chat history" button. Would an iframe be better?

 

I look forward to any feedback. Much appreciated!

 

[ultrus]

I got it figured out!

 

I didn't know that css had a overflow: auto; feature. Now my div is scrolling like a nice chat box. Also, I decided I like having the nickname and message on separate lines, so everything is good to go now.