Trouble getting div to scroll [css]

Question

What i need is to be able to scroll through the messages using the outer div. the inner div is positioned at the bottom of the outer div so that when new messages are added (via JavaScript), they appear from the bottom and rise up... which works, it just isn't scroll-able.

   <div id="outside">
    <div id="inside">
        <p>The quick</p>
        <p>brown fox</p>
        <p>jumps</p>
        <p>over the</p>
        <p>lazy</p>
        <p>dog.</p>
        <p>I'm on the bottom!</p>
        <p>I'm on the bottom!</p>
        <p>I'm on the bottom!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>
<style>
#outside {
    height:150px;
    width:300px;
    position:relative;
    overflow-y:scroll;
}
#inside {
    position:absolute;
    bottom:0;
}
</style>

EDIT: To see it live go to http://io-chat.com:85/lobby The chat output is what i'm working on, if you keep sending messages you'll eventually overflow the output. I've got it to scroll now, but it creates a large whitespace at the top...

Answer 1

I can get it to scroll by either adding a top attribute to the outside css class or giving the inside class a height. I'm not sure I understand exactly what you want though. Is each inside div a message or is each paragraph within the inside div a message?