Div Overflow problem

[TMO]

Hi I’ve recently been designing a dynamic resizing website with css (well some of it ) which has been going well until I wanted to put some content into a div tag which is situated in the middle of the screen of a table cell. Currently the height and width is set to 100% which works fine in IE but not in firefox where it continues to make the div bigger then the available space in the table cell. Basically I'd like it to go to the maximum space of the table cell and then display a scroll bar. I've had a look round for this problem and I understand that firefox is doing the correct behaviour, but obviously I don’t want this. A large part of my searching included this forum but I could not find anything relevant to my situation as I'm putting the div inside table not on the page body root.

Here is the prototype page I’ve been working on:
Test Page

So far the only solution I’ve found for this is to make a JavaScript to dynamically fix the height values as the webpage is resized but since java script can be turned off and the piece of code I’ve tested throws a blocked content message in ie, I wish not to use it.

Any help on this would be appreciated thanks!

[blain]

div inside a table cell, sounds like a tabular layout.

[thndrcloud]

Don't specify a width for the div. It's a block level element and those automatically take up 100% of the space they have available. For the height I think what you need to do is again not specify a height for the div. Instead give the table cell the height and assign the div's overflow property to scroll. I'm not positive that this will work but that's what I'd try.

[TMO]

Yeh you would of thought so but with firefox's infinate wisdom it doesn't work. I think the problem is that the table cell that the div tag is in also has a height and width of 100% and because firefox treats 100% differently to ie (i.e. it seems to treat it as 100% of the data rather then 100% of the available viewing space) it messes the rest of the display up to render all the data.

Is there anything I can do to stop the div from expaning to much before it hits the bottom of the cell its in? Or is there anything else I can put the content in that will give me a scrollable area? (not iframes already tried them cause I want it to work with forms aswell, with the submit outside the iframe the input boxes inside it doesnt seem to be included in the form post.)

[thndrcloud]

Basically the problem that you're hitting is that a table cell by nature will expand its height to fit the content. The only way around this is to give the table and/or the div a specified height.

Is there a reason you've decided to nest all of this in tables? I think what you're trying to accomplish can be done much more simply in straight CSS.