strange position of iScroll scrollbar

Question

I'm building a touch-enabled html app and decided to use iScroll for scrolling within a div.

essentially, I've got two seperate scrolling divs but the scrollbars are always placed on the far outside of the page

http://jsfiddle.net/SRXMn/3/

the problem I'm having here is two-fold.

1) the scroll bars are both on the far right side (which doesn't make much sense for the left-scrolling content

2) the scroll bar extends all the way to the top of the header, when the only content being scrolled is below

when I set 'position:fixed' on the header, it shrinks down to a tiny size, and I can't seem to over-right that.

Answer 1

You could try using position:relative on div.scroll_hold