Div height issue

Hi I’ve recently been designing a dynamic resizing website 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 id 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.

Here is the test 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!

You may want to consider a 100% tableless layout... you could make better use of the background images this way.

Otherwise, look into the overflow:auto property if it's a scrollbar you're after...

Thanks for your reply. Yes the div tag already has the overflow auto property which is the problem cause IE is using it correctly but firefox isnt. As for the tableless design its a prototype at the moment I may consider the change if I can get this div issue sorted

The change should sort the div issue for you.

I've been looking into tableless examples which are done with divs I presume? From what I can see and looking at the current interface design it could be quite difficult as if you look at THIS the way I've split up the table with the images is quite complex. Based on this can you guarantee me that a tableless design will:

1. Solve the problem I have with the div as described in the original post.
2. Be able to replicate my current design accurately.

I'm only asking this is because I'm doing this for were I work and I don’t want to waste my time and the companies time starting a new design if it isn't going to work.

I didn't see the div you mentioned. But if you never have to go back to this and you don't care about your reputation as a designer, it looks like you're so far into it that you might as well just dump it on them such as it is. Firefox should respect the "max-height" property, and if you use "overflow: auto" as MadCowDzz mentioned you should get scrollbars. Then just hope you never have to see it again. This kind of ancient mark-up is a nightmare to tweak and IMHO it's a "waste of time" doing it the hard way even the first time. Once you get the hang of using CSS to seperate design style from content you'll never go back to table based layouts.