Question

I have a few nested and I want to allow my deepest to scroll vertically.

in CSS I have tried adding:

overflow-x: hidden; /* horizontal */
overflow-y: auto;  /* vertical */

to the class I am assigning to the but that does not seem to do it. Changing overflow-y: yes; does not work either.

How does one accomplish this. I want this to scroll because it gets populated with MySQL data where the other div’s just present selectable criteria to create the query and run it.

thoughts are appreciated.

Example:

<div id="content">
    <div id="slidingDivKeynotePresentations">
        <!-- content here -->
    </div>
</div>

My CSS:

#content {
    position: absolute;
    top: 0;
    left: 21%;
    margin: 26% 31% 1% 21%; /* Cater for Mac IE5 */
    /*\*/ margin: 0; /* Put back for all the rest */
    /*\*/ overflow: auto; /* no need for Mac IE5 to see this */
    overflow-x: hidden; /* horizontal */
    overflow-y: yes;  /* vertical */
}

#slidingDivKeynotePresentations {
    display: none;
    height: 600px;
    width: 600px;
    background-image: url('images/transwhite.png');
    border: 1px solid #3F4933;
    position: fixed;
    top: 100px; 
    left: 290px; /*Set left value to WidthOfFrameDiv*/
    padding: 12px;
    overflow-x: hidden; /* horizontal */
    overflow-y: auto;  /* vertical */
 }

Answer 1

Here is a fiddle with it working: Just replace position: fixed with position: relative; in the inner div. I took away all of the overflow-x and -y, and simply put overflow: auto on the containing div. And I also moved the border to the outer div so it wouldn’t get cut off at the bottom. But I think all you need to do is switch the fixed with relative.

To take away the horizontal scrollbar, simply make the width of the inner div the same or smaller then the width of the outer div. Especially since CSS3 overflow-x and -y is not widely available yet.