Scrolling message board, how do I link to an id in a div within a div?

Ok so this might be very basic but I'm struggling here.

I've got limited space but I need a comments board so I need to be able to scroll through messages. I've got my database and php setup and the messaging works fine. I've done the layout with div's so that all the comments are within the master comments div with is set to overflow: hidden, hiding the messages that don't fit. Every message is then formed as a div (which has 2 div's inside for subject/sender and comment sections). Each of the message div's is automatically given an id by the script so I have something to target here.

What I would like to do is to have the messages scroll so that when you click 'down', the topmost message will disappear and the messages will move in line so that the next one is now topmost. Is this possible? I tried to play around with childNodes but couldn't get it to work.

Also, does my layout solution make any sense? Should I change it to lists?

CSS is

#kommentit { // <- all comments
position: absolute;
margin-top: 50px;
margin-left: 475px;
width: 400px;
height: 400px;
overflow: hidden;}

.sitoja { // <- this i开发者_高级运维s the single comment binder
position: relative;
width: 400px;
background: #fff;
border-radius: 10px;
padding: 0;}

I assign id for every message so I get

<div class="sitoja" id="[i]">

in php

echo '<div class="sitoja" id="'.stripslashes($info2->id).'">';

You can view the dummy of the message board here: http://pohjis.site40.net/testi.php

There are many ways to do it.

The simplest is changing overflow: hidden; to overflow: scroll;.

You can also display: none; the topmost comment to make the lower ones move up.

And you can scroll the div with javascript.

BTW, with some adjustment of the css you don't need position: absolute; - not using that will make designing things easier.