DIV esticar até a altura 100% em uma célula da tabela
Tenho o seguinte layout:
undo de 4 cantos arredondados e dois painéis (painel esquerdo e painel direito) dentro del
tualmente, eu implemento o layout da seguinte maneir
Tabela com 9 células:
top left corner | | top right corner
|left div right div|
bottom left corner | | bottom right corner
Código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table id="content" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="corner1.jpg" /></td>
<td>
</td>
<td>
<img src="corner2.jpg" /></td>
</tr>
<tr>
<td>
</td>
<td valign="top" height="100%">
<div id="menu" style="float: left; width: 235px; height: 445px; background-color: #660000">
Menu
</div>
<div id="mainContent" style="float: left; margin-left: 10px; height: 100%; background-color: #888888">
Main Content
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<img src="corner3.jpg" /></td>
<td>
</td>
<td>
<img src="corner4.jpg" /></td>
</tr>
</table>
</body>
</html>
O que eu quero perguntar é como posso esticar a altura da div direita para 100% para que seja igual à altura do td (a altura da div esquerda aumentará de acordo com a ação dos usuários
Tentei de várias maneiras e ainda não consigo descobrir. Defina a altura de div para 100% não funciona
O que devo fazer para conseguir isso? Não use tabela?
PS:
O código foi alterado. Você pode colar o código no bloco de notas e testá-lo em IE.
O código é editado novamente para adicionar o DOCTYPE.