I am working on a website for a class and I am having a difficult having tables expand properly. I am going to simplify the code so you can get the general idea. I want a table to take the entire height of the page and have 1 row and 3 columns. I want the top row to be 20 pixels, the bottom row to be 20 pixels, and the center row to fill the rest. The code I have works fine in Firefox but not in IE. IE redistributes all of the row heights evenly. I really need this to work. Please help, here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="fullheight">
<tr>
<td height="20" bgcolor="#FFFF00"></td>
</tr>
<tr>
<td bgcolor="#990000"></td>
</tr>
<tr>
<td height="20" bgcolor="#FFFF00"></td>
</tr>
</table>
</body>
</html>
And the .css
html, body{
height:100%;
margin: 0;
padding: 0;
border: none;
}
.fullheight{
background-color: #FFFFFF;
height:100%;
margin: 0 auto;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="fullheight">
<tr>
<td height="20" bgcolor="#FFFF00"></td>
</tr>
<tr>
<td bgcolor="#990000"></td>
</tr>
<tr>
<td height="20" bgcolor="#FFFF00"></td>
</tr>
</table>
</body>
</html>
And the .css
html, body{
height:100%;
margin: 0;
padding: 0;
border: none;
}
.fullheight{
background-color: #FFFFFF;
height:100%;
margin: 0 auto;
}
Facebook
Twitter