Containing div not containing

[liz0001]

I have a large div and am trying to place 4 divs inside it. The containing div has a set height, as do two of the contained div. The other two do not have set heights.

It works fine unless one of the divs without a set height gets too big. If that happens, I want it to add a scroll bar. Instead, it just cuts off the rest of the content.

Here are my divs:

Containing Div:

#CenterDivNA {
    width: 580px;
    height: 800px;
    float: left;
    background: #FFFFFF;
    display:block;
}
 

This set-height div is repeated twice:

#DishClassNA {
    position: relative;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    text-align: left;
    height: 20px;
}
 

Here is the (usually) shorter of the two variable height divs:

TopFrameCenterTable {
    position: relative;
    text-align: left;
}
 

And here is the other one:

#centerframena{
    position: relative;
    text-align: left;
    overflow:auto;
    padding-left: 15px;
    width: 564px;
}
 

Thanks for all ideas.

[drhowarddrfine]

You can't use the same id name for more than one element.

To get the scroll bars, add 'overflow:scroll' to the parent. (not tested)

[liz0001]

Thanks - You're right on the double ID's, it's actually a class, sorry, I showed it wrong.

Adding "overflow: scroll;" to the parent does add a scroll bar to the whole containing div, all the time. (Adding "overflow: auto;" to the parent adds a scroll bar to the whole containing div when necessary.)

I want a scroll bar on ONLY the last div, the "centerframena" div, ONLY when necessary.

[drhowarddrfine]

Can you construct a sample page cause I'm too lazy to do it myself.

[liz0001]

Yes, here is an example page:

http://www.dinnerbeat.com/Example.asp

I added colors to the different divs so it is easier to see.

[drhowarddrfine]

If you add 'overflow:scroll' to CenterDivNA, you get the scroll bars but for the whole center div and not just centerframena but it's close. That's because it's overflowing it's parent. centerframena does not have a similar parent to overflow and that's why just adding overflow:scroll to it does not do what you want.

The solution might lie in creating a wrapper around the actual contents but still giving centerframena the overflow:auto property which will create the scrollbars when needed. This way, when the contents overflow centerframena, you'll get the scroll bars.