I have three div as below :

<div id="left"></div>
<div id="center"><table></table></div>
<div id="right"></div>

Now what i need to do is to keep #left and #right fixed for horizontal scroll and scroll #center only. This is working with css position:fixed for #left and #right. But the problem is when i scroll html page vertically i need all the div's i.e. #left,#centerand #right to scroll. This is not working. Please anyone help me how to do it so that #left and #right scrolls vertically along with #center and remains fixed for horizontal scroll. I have no clue how to do it using css and make it work.

I have three div as below :

<div id="left"></div>
<div id="center"><table></table></div>
<div id="right"></div>

Now what i need to do is to keep #left and #right fixed for horizontal scroll and scroll #center only. This is working with css position:fixed for #left and #right. But the problem is when i scroll html page vertically i need all the div's i.e. #left,#centerand #right to scroll. This is not working. Please anyone help me how to do it so that #left and #right scrolls vertically along with #center and remains fixed for horizontal scroll. I have no clue how to do it using css and make it work.

• javascript
• jquery
• css

1 Answer 1

Try this link, it uses a plugin called scrollspy to do the stuff. Pretty easy...

http://www.rickyh.co.uk/css-position-x-and-position-y/

Also, see this SO question: CSS: fixed position on x-axis but not y?

Thanks to semir.babajic : here is the actual snippet. You will need jQuery.

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 //Always 15px from left
    });
});