50 and 100 are the heights I want it to stay, no variation no exceptions. The main body is fine and expected to adjust, but to compensate for those adjustments I want two cells on either side to adjust also.
Instead those cells stay in it's smallest state and the changing height occurs on the 50 and 100 value cells.
How should I go about fixing this? (and if someone is good with DIV's and CSS instead of tables, I'll take that advice too).
You're right - it's a classic and it's probably going to take a different design approach. The issue is that the W3C calls height attributes for table cells "recommendations". So visual browsers are not asked to treat height attributes as constraints or rules, and they don't. In fact, each browser follows a different pattern of decision making.
There is solid reasoning here - even though it can be frustrating. If height attributes were taken literally, then web authors could create valid but contradictory height instructuctions that would crash or freeze the browser.
I played with your mark-up for a bit, but no joy I'm sorry to report. Note as well that height and width attributes for <td> elements are deprecated in HTML4. See [webmasterworld.com...]