I am haveing problems creating a fluid layout with tables.. here is what I am essentially going for..(below).. the only problem with this is..I added height: 100%; to the body so the table will expand to meet the viewports borders..I declared height propertys for my header and footer.. though since I added a height property to the body it seems to ignore the height propertys for the header+footer.. I could take out the dtd and have it run in quirk mode however.. I would rather I not do this ..anyone have any suggestions? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
height: 100%;
font: bold 10px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
#table {
width: 100%;
height: 100%;
background: #003300;
}
.nav {
width: 160px;
}
#maincontent {
border-right: thin dashed #000000;
border-left: thin dashed #000000;
}
.head-foot {
height: 40px;
}
-->
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" id="table">
<tr bgcolor="#000000" class="head-foot">
<td colspan="3">Header</td>
</tr>
<tr>
<td valign="top" bgcolor="#003300" class="nav">nav</td>
<td valign="top" bgcolor="#006600" id="maincontent">
<p>Main content</p>
<p> </p>
<p> </p>
<p> </p>
</td>
<td valign="top" bgcolor="#003300" class="nav">nav</td>
</tr>
<tr bgcolor="#000000" class="head-foot">
<td colspan="3">Foot</td>
</tr>
</table>
</body>
</html>
