Since frames will not be allowed in HTML 5, I'm working on creating a frame-like interface with CSS and JQuery. However, I'm a noob to Javascript and JQuery, and I'm having some trouble debugging a piece of code that I built. Here it is in JSFiddle with a minimalistic HTML/CSS framework - please take a look:

http://jsfiddle.net/gaRV2/2/

It almost works for me; the only problem is that if the browser window is not maximized, I can drag .dragbar all the way past the right edge of the browser window until my cursor hits my right monitor edge. I want .dragbar to stop when there are 100px left for #main, however. I can't figure out why my code doesn't do this. Any ideas?

(when I posted it in JSFiddle, the bug doesn't occur, probably because of the website constraints. In a standard browser window, the bug occurs.)

Also, any suggestions for optimizing and improving this code would be appreciated. I don't know if I have a bunch of dead wood in there or what - just that it works.

Thanks,

Mr. Baggins