I've tried to get CSS to give me a basic layout where I can place a
footer at the bottom of the page and the top of the page I can use for
content. I don't however want the footer to pull away from the bottom
of the viewport if the top content is small. Also, when I resize the
window I want the footer to move with the bottom of the page until I
reach the content.
Here is an example that works both in IE and Mozilla using tables. I
aslo had to use quirks mode for IE. I want to get rid of quirks mode
and use div's. Personally I don't think it can be done.
code:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<style type="text/css">
body{margin:0px;padding:0px;}
table{border-collapse:collapse;height:100%}
td{padding:0px}
#top{ background-color:red;vertical-align:top}
#bottom{height:100px;
background-color:yellow;vertical-align:top}
</style>
</head>
<body>
<table>
<tr id="top">
<td>
<h1>header</h1>Takes up the viewport minus the footer
</td>
</tr>
<tr id="bottom">
<td>
<h1>footer</h1>Located at the bottom
</td>
</tr>
</table>
</body>
</html>
