Menu
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.
528
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
height:100% Before setting the height property to 100% inside the . box class, make sure to add it to both HTML and body tags as well, otherwise, it won't work. This is because, when you set the height to 100% to an element, it will try to stretch to its parent element height.
The height of rows 'tr' in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
Seeing as you already have tables for layout, I wouldn't really bother trying to do it the "right" way.
Just use another table.
CSS
<style type="text/css" media="screen">
#menu {
width:235px;
height:445px;
background-color:#660000
}
#mainContent {
height:100%;
width:auto;
background-color:#888888
}
#container {
width:100%;
}
</style>
HTML
<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" style="padding:0px;">
<table id="container" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="menu"><div>Menu</div></td>
<td style="width:10px"></td>
<td id="mainContent"><div>Main Content</div></td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td><img src="corner3.jpg"/></td>
<td> </td>
<td><img src="corner4.jpg"/></td>
</tr>
</table>
maybe you can add a min-height to the right div equals to the value of height of the left one... it could maybe do the trick to what you want...
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
