Fixed Position div Vertical Only

Question

I have a current web build with a right sidebar that is a fixed position. I have tried to positioning from the right but don't want it overlapping other divs content.

What I am looking for is to have the content scrollable horizontally to the right when it is out of the viewport window. Any help would be greatly appreciated.

similarly to this: http://demo.rickyh.co.uk/css-position-x-and-position-y/ however I can not get this working.

---

This has been solved by alternative method. Thanks for those who actually considered helping.

Answer 1

Keep the fixed div.

And have the following javascript code which will take care of horizontal moving.

$(window).scroll(function(){
  $('.fixed_div').css('left',-$(window).scrollLeft());
});

Answer 2

then add one more property in #sidebar

#sidebar {
width:400px;
height:550px;
padding:10px;
float:left;
text-transform:uppercase;
position:fixed;
left:835px;
overflow:scroll-x;
}

Answer 3

That example site is using more than just css to generate that effect. It is also using a MooTools plugin: ScrollSpy. http://davidwalsh.name/mootools-scrollspy

View the source at http://demo.rickyh.co.uk/css-position-x-and-position-y/ to see the scripting and the full css.