JQuery Chat Box - show the first messages below the DIV, moving up

Question

I have a DIV chat that sends and receives messages.

Currently, messages start at the top of the DIV and work on the DIV (shown in red), and when they get to the bottom, they push up using Jquery, as shown below:

.scrollTop(activeConversationsDIV[0].scrollHeight);

I wanted to ask if there is a method for running messages at the bottom of the DIV? This will make more sense to the user as they will see what they print next to where they print it.

Is there a way to start a message flow from the bottom of the DIV running up?

Thankyou

Answer 1

display: table, display: table-cell vertical-align: bottom.

:

http://jsfiddle.net/ktpRK/

CSS

#chat {
    display: table;
    height: 200px;
    width: 200px;
    border: 1px solid #000;
}

.chatMessage {
    display: table-cell;
    vertical-align: bottom;
}

HTML

<div id="chat">
<div class="chatMessage">
    <p>test</p>
    <p>test 2</p>
</div>
</div>

Answer 2

HTML

<div id="chatbox">
    <div id="chatmessages">
        <div>Hi </div>
        <div>Hello </div>
        <div>How are you ?</div>
        <div>I am fine, Thanks ! </div>
        <div>And how about you? </div>
    </div>
</div>

CSS

#chatbox {
    overflow:   none;
    position:   relative;
    width:      100%;
    height:     200px;
    border: 1px solid #ccc;
}
#chatmessages
{
    overflow:   auto;
    position:   absolute;
    bottom:     0;
    width: 100%;
    max-height: 200px;
}
#chatmessages div {
    border:1px solid #e2e4e3;
    border-radius: 5px;
    margin:5px;
    padding:10px;
}

JQuery

$('#chatmessages').scrollTop($('#chatmessages')[0].scrollHeight);

jsfiddle

jsfiddle