The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Why no scroll bar when using a div within a div ? Reply To: Why no scroll bar when using a div within a div ?


Thanks and sorry for lack of clarity Paulie_D. During testing, I intentionally display both scrollbar areas so I can see what’s going on (or not). What you see in the screenshot are the divs’ scrollbar AREAS (I don’t know a tec term for them) – not actual scrollbars. After testing I will set overflow:auto.

My problem is that the wrapper div doesn’t display an actual scrollbar even though its fixed height (653px) is less than the height of the “contained” div Options (in this case 990px), which I would expect to trigger the display of a scrollbar. Therefore a user can’t scroll down to the next 5 rows of option buttons in the Options div.

Just in case the big picture helps ….

Each menu page has a variable number of option buttons (sometimes well over 100) which I want to display; in this example there are 30 buttons in 10 rows of 3 buttons per row.

The top of the screen including the “Previous page” and “Top page” buttons is defined in a fixed div and is fine.

I don’t know how best to use css to position a variable number of rows of buttons, so I:
– calculate the height of the Options div (I have deliberately spaced out the rows in the test so I HAVE to scroll)
– refer the php script to a css file (in this case the above-mentioned atwmenu30.css) which positions the top of each button as an absolute % of the height of the Options div.

I need to avoid using CSS3’s multiple columns as the target browsers will be old. The above may not be the best way to use css (it means that I have to define lots of css files) but I’m surprised and depressed that it doesn’t display an actual scrollbar, which is all that I need for it to work !

Any flashes of genius ? Can you see any fundamental misunderstanding of how css works ? Many thanks anyway.