absolute positioning and scrollable DIV

Question

I have this tricky CSS problem: I have this HTML:

<div id="wrapper">
    <div class="left"></div>

    <div id="scroll">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat.
    </div>

    <div class="right"></div>
</div>

With this CSS:

#wrapper {
    position: relative;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 47px;
}

#scroll {
    position: relative;
    height: 100%;
    width: 10000px;
}

div.left, div.right {
    position: absolute;
    display: block;
    background-color: rgba(255, 0, 0, 0.5);
    width: 24px;
    height: 100%;
    z-index: 100;
    top: 0;
}

div.left {
    left: 0;
}

div.right {
    right: 0;
}

And the visual result is this:

For some reason, the div.right is moving when I scroll the #scroll. I want it to always float at the boundary of #wrapper.

This is what I get right now:

Here is the jsfiddle: http://jsfiddle.net/b5fYH/

Thank you

Edit

Just because it wasn't obvious, it must work on mobile devices.

Answer 1

You have to know the difference between position: absolute and position: fixed.

The first one means: place the element in absolute position within relative element and keep in in that place (relatively).

The second: place the element in absolute position within window (frame) and keep it there no matter what happens.

Check this fiddle: http://jsfiddle.net/b5fYH/1/