CSS Scrollbar messing up layout

Hi all, thanks in advance for helping me out!

I'm working on this project and have been puzzling how to put a scrollbar in a table to create the same effect as if you were using frames, but without the disatvantages of frames.
I found a way, and implemented it. But somehow it messes up the layout, and I have no idea what causes this.

Before inputting the scrollbarfunction:
www.niekdekker.com/site/noscrollbar.htm

After inputting the scrollbarfunction:
www.niekdekker.com/site/scrollbar.htm

My question is:
How do I change the code so the layout won't get messed up? If that's not possible; is there another way to get a scrollbar without using frames?

You can download and adjust the websitefiles here:
www.niekdekker.com/site/files.zip

I hope you can help me!

It depends on what effect you want to accomplish, but it seems to me that it would be easiest to move around the presentational graphics.

Move the yellow triangle graphic in a bar underneath the div, instead of to the right of it; you'll need to separate it from the photograph. This way, the div scroll bar will align to the far right of the div and the footer-like effect of the yellow triangle will be preserved.
Furthermore, use padding to create sufficient whitespace around the text contained in the div so it doesn't run into the scroll bar area.

While I'm still far from a fan of fixed height scrolling elements like this, at least the visuals should work out to some extent.

Just change the height of the div.scroll until the white space goes away. 343 worked for me. I also agree that more white space would make it easier to read. Adding the blue text will space it out further from the scrollbar.
div.scroll {overflow: auto; height: 343; padding-right: 10px; }