A picture is worth a thousand words
. I now understand what you are trying to do, but I think my ability to help may have run out
.
What you are seeing is the table being laid out 'properly' - this is how a table should appear. What you want goes beyond what tables were intended for. It's a long shot, and bound to have problems cross-browser, but you could try style="height=100%;" on the MiddlePane TD. Assuming this doesn't work, you'll have to move into nested tables, something like this;
<table border="0" bgcolor="green" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td id="TopPane" class="toppane" colspan="2">Top Pane</td>
</tr>
<tr>
<td valign="top" id="LeftPane" class="leftpane">Left Pane<br>
Left Pane<br>
Left Pane<br>
Left Pane<br>
Left Pane<br>
Left Pane<br>
Left Pane<br>
</td>
<td valign="top">
<div id="ContentPane" class="contentpane">
Content Pane</div>
<table border="0" bgcolor="red" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td valign="top" id="MiddlePane" class="middlepane">Middle Pane<br>
Middle Pane<br>
Middle Pane<br>
</td>
<td valign="top" id="RightPane" class="rightpane">Right Pane<br>
Right Pane</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="BottomPane" class="bottompane" colspan="2">Bottom Pane</td>
</tr>
</table>
Nested tables is widely regarded as being a bad way to do things these days. If you can't get what you want working I would consider looking at XHTML + CSS layouts. It's harder to get started, but once you have a good layout debugged and working it's much easier to maintain and is more likely to produce consistent results cross browser.
Regards, Rhys