Can't align latest messages to the bottom - html

Question

I have to create an IRC-like web chat (latest messages have to appear at the bottom of the parent container).
Here's my (unsuccessful) attempt:
.inner-conversation-container {
height: 100px;
position: relative;
overflow: hidden;
width: 500px;
}
.conversation-stream-container {
max-height: 100px;
position: absolute;
bottom: 0;
overflow: auto;
width: 100%;
}
<div class='inner-conversation-container'>
<div class='conversation-stream-container'>
<div class='conversation-item'>
<div class='conversation-message-part' msg-id='137'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='138'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='139'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='140'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='141'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='142'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='143'>
<div class='center-part'>Content</div>
</div>
<div class='conversation-message-part' msg-id='144'>
<div class='center-part'>The latest message that needs to be in the bottom</div>
</div>
</div>
</div>
</div>
The div with msg-id="144" needs to be visible and aligned to the bottom.

Answer 1

jQuery aided solution
Using your HTML mark-up:
<div class='inner-conversation-container'>
<div class='conversation-stream-container'>
<!-- A single item -->
<div class='conversation-item'>
<!-- Message parts -->
<div class='conversation-message-part' msg-id='125'>
<div class='center-part'>test 9</div>
</div>
...
<div class='conversation-message-part' msg-id='143'>
<div class='center-part'>no, it's not</div>
</div>
<div class='conversation-message-part' msg-id='144'>
<div class='center-part'>latest needs to be in the bottom</div>
</div>
</div>
</div>
</div>
you can simplify your CSS as follows:
.inner-conversation-container {
height: 200px;
width: 500px;
border: 2px solid lightgray; /* for demo only */
overflow: auto;
}
.conversation-stream-container {
background-color: yellow; /* for demo only */
}
and set the scroll bar position using jQuery:
$('.inner-conversation-container').scrollTop(
$('.inner-conversation-container')[0].scrollHeight
);
Demo fiddle: http://jsfiddle.net/audetwebdesign/FW6Y5/