Reply To: Why no scroll bar when using a div within a div ?

[coolbawn]

Thanks v much Paulie_D

I can’t see a way to attach a screenshot in the forum so you can download it here: http://www.around-the-world.co.uk/public/Screenshot2.jpg

The HTML (created by PHP) which produced that page was:

<div id='OptionsWrapper' style='position:fixed; top:120px;left:0px; width:100%; height:653px; overflow:scroll; z-index:999;'>

<div id='Options' style='position:fixed; top:120px;left:0px; width:98%; height:$options_height; overflow:scroll;'>
</div>
</div>

The resultant HTML is valid, according to Opera

In the screenshot:

There should be 30 buttons laid out according to the .css file at: http://www.around-the-world.co.uk/public/atwmenu30.css

The 15 buttons shown are fine. The problem is that I can’t scroll down to the other 15.

You can see 2 scrollbars – one for each div.

I would expect the inner scrollbar area (belonging to the Options div) to be “empty” – as it is – because $options_height is calculated as 990px which is enough to hold all 10 rows of buttons.

I would expect the outer scrollbar area (belonging to the OptionsWrapper div) to contain a scrollbar as the Options div has a greater height (990px) than the OptionsWrapper div (currently set at 653px to match my small laptop).

Yes, I can get rid of default code eventually but I’m leaving it in so I can test with different values eg to display the 2 scroll bar areas side-by-side.

I won’t always want a scrollbar; I just set overflow:scroll so the test displays the scrollbar area even if there’s no scrollbar.

Thanks so much for any help you can give me.