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:scrol l' 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 "centerfram ena" 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:scrol l' 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.