Vertically Scrolling a <DIV>

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 */
 }

---

You might be looking for the overflow property; overflow-x and overflow-y are not supported by all browsers; they are new in CSS3

• http://www.w3schools.com/css/pr_pos_overflow.asp
• http://www.w3.org/TR/css3-box/#overflow

---

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.

---

Take out the overflow-y and overflow-x. You should'nt need to specify overflow-x: hidden, as that is default anyway. Simply setting overlow: auto; on the #slidingDivKeynotePresentations should do the trick, shouldn't it? As long as there's a height specified.