I have following layout:
4 rounded corners background and two panels (left panel and right panel) inside it.
Currently I implement the layout as follows:
Table with 9 cells:
top left corner | | top right corner
|left div right div|
bottom left corner | | bottom right corner
Code:
<!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>
What I want to ask is how I can stretch the height of the right div to 100% so that it equals to the height of the td (height of left div will increase according to users' action).
I have tried many ways and still cannot figure it out.Set height of div to 100% does not work.
What should I do to acheive this? Don't use table?
PS:
The code is changed. You can paste the code into the notepad and test it in IE.
The code is edited again to add the DOCTYPE.
See Question&Answers more detail:os
