Align text with bottom as it comes in during a chat?

Question

I'm building a custom web chat application, and while I have the basics worked out, I've been wondering if this was possible... right now, the chat comes in at the top of the div, and when it reaches the bottom, the div starts scrolling. This works. This is great. But I was wondering if it was possible to create it more like an IRC client, where the chat comes in initially at the bottom of the div, then each new line comes in below the old ones, etc, and again, when the div is full, it starts scrolling.

I've managed to get part of this working: I can get it displaying this way. But I can't find a way to scroll it; either the scroll doesn't appear (when there's no overflow on the inner, text div, despite there being an overflow on the outer, container div), or it's confined to the width of the text rather than the width of the container div.

Some options I've tried:

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: auto; position: absolute; bottom: 0;"></div></div>

This has the text appear properly at the bottom, but no scrollbar ever appears.

<div id="chatbox" style="overflow: auto; position: relative; width: 100%; height: 400px;">
<div id="chatmessages" style="overflow: scroll; position: absolute; bottom: 0;"></div></div>

This has the text appear properly at the bottom, and a scrollbar appears, but it's only ever as wide as the text, even if width=100%... and when the text reaches the top, the scrollbar remains gray.

Basically, do I want the scrollbar on the inner or the container div, is this even possible, how do I force it to work, and am I going about this entirely wrong?

Answer 1

The scroll-bars don't kick in because chatmessages just keeps getting taller.

Use these styles:

    #chatbox
    {
        overflow:   none;
        position:   relative;
        width:      100%;
        height:     400px;
    }
    #chatmessages
    {
        overflow:   auto;
        position:   absolute;
        bottom:     0;
        max-height: 400px;
    }