I have a main container. Inside this container I have a div which spans a height which fits into the main container and needs to remain that way. It also has a width wider than the main container, with an overflow for the horizontal scroll bar.

The issue I'm having:
1. Rather than expecting the user to scroll to the bottom of the page and then use the horizontal scroll bar, I would like the horizontal scroll bar to be fixed to the bottom of the view (not the div)

1. On load, I would like the horizontal scroll bar to be present at the bottom of the users screen. As the user scrolls down, the horizontal scroll bar moves down the page with it until reaching the bottom where it'll sit at the bottom of the div (rather than the window)

Any help regarding this would be greatly appreciated.

Thanks.

<http://codepen.io/seraphzz/pen/LBIsf>