Div won't scroll

[Webskater]

Hello
I have never used divs much before - always relied on tables and iframes. The reason I don't use them is they never seem to do what you want. I have this:
<table width="98%" height="98%">
<tr>
<td>
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #000099;">
Dynamic Content here
</div>
</td>
<td>
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #000099;">fixed content here</div>
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #000099;">fixed content here</div>
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #000099;">
Dynamic Content here
</div>
</td>
<td>
<div style="position:relative; top:0; left:0; overflow:auto; overflow-x:hidden; background-color:#FFFFFF; width:100%; height:100%; border:1px solid #000099;">
Dynamic Content here
</div>
</td>
</tr>
</table>
So I have a 3 column table layout with one row. The table is set to height=98% bacause I do not want the whole page to scroll. First cell contains a div with dynamic content. When there is more content than can be displayed, the div gets a vertical scroll bar - which is what I want.
The 3rd cell is the same and this works okay.
The middle cell has 3 divs. The top two have pretty much fixed content. The bottom div has dynamic content. I want the bottom div to get a vertical scroll bar if there is too much content to display. But, if there is too much content, the bottom div expands and the whole page gets a scroll bar. Any idea why it works for divs in cells 1 and 3 but not for the bottom div in cell 2. Thanks for any help. You can waste hour after hour trying to get things like this to work!

[createErrorMsg]

Webskater, I've never been a 'table designer' so my understanding of things on that end isn't really up to scratch, but let me take a stab at your problem anyway.

Have you tried cutting the first 2 <div>s in cell2 out, then filling <div>3 with content? What does it do if you try that? My thinking is this: while you have your overflows set on each <DIV> the <TD> cell in which those three reside doesn't have any overflow on it. So the browser is going to pack all three of those <div>s into that one cell come hell or high water, even if it means expanding the cel itself beyond "acceptable" measures.

You may need to put those three <div>s in their own cells -- or, hey hey, ditch the table cells altogether and go for css-p! ;)

Also, what is the position:relative; top:0; left:0; for? Position:relative allows you to offset a box in relation to it's containing box, IF you choose to set an offset value (top and left, for example). If you don't give it an offset, it puts it right in the flow, at top:0 left:0. So specifying that is a little redundant. The only reason I can think to have those <div>s set to position:relative is if your dynamic content will contain any floats or absolutely positioned elements. If not, i THINK the position:relative is just extra code.

Again, I'm not a table person, so it may be that <div>s in a table need position:relative, I don't know. If that's the case, just ignore me ;)