Best way to have right scroll bar only control specific div

[TechBoyJK]

Hi Guys,

I have a website template that has a header, and below the header are 3 divs. The divs are left, middle, and right.

Most of the content will be in the middle, and the left/right divs are preconfigured to not take up any more page space than what's above the fold.

If the center div's content goes beyond the page fold, the scroll bar appears. However, this will scroll the entire page. I'd like it to only scroll the center div and leave the rest of the page static and in place.

I want to be able to scroll ONLY the 'scrollable' content and use the browsers main scroll bar.

Thoughts? can this be done without javascript and only css?

 

[uclabachelor]

<div style="overflow:auto;">stuff here</div>

 

[TechBoyJK]

<div style="overflow:auto;">stuff here</div>

thanks, but so far that creates a new scroll bar that is attached directly to the div. I want the control to be passed to the main browser vertical scrollbar

 

[uclabachelor]

thanks, but so far that creates a new scroll bar that is attached directly to the div. I want the control to be passed to the main browser vertical scrollbar

then use position:fixed for the two side divs.

 

[TechBoyJK]

From what I'm reading, the best way to do it is to set the 'non scrolling' divs to fixed. What's not position fixed, is what will scroll with the scroll bar.

I would need to set the position:fixed attribute to the Header/Sidebar1/Sidebar2 elements. So when the center content grew passed the fold and I scrolled, those elements would remain in the same fixed position.

 

[GregGreen]

1. The fold as it relates to web design doesn't exist. Erase it from your memory bank.
2. display: fixed; top: someValue; left: someOtherValue;

 

[xanis]

If the two side divs aren't ever going to move, throw a position: fixed; on them and use your margins to set the location.