Hey gang, I am trying to break an old habit of using tables to layout pages (hey, if itís not broke don't fix it... well its starting to break....). Anyway, it seems that everywhere I look, css seems to be pixel driven when it comes to height. I have a project for an intranet site (all clients are IE7), the page needs to look the same in all screen resolutions. The page will be split into 2 halves vertically, 70% on the top and 30% on the bottom. If I were to use tables, the html would look like this:

<body>
<div align="center">
<table border="0" width="100%" id="table1" style="border-collapse: collapse" height="100%">
<tr>
<td>
<div align="center">
<table border="0" width="100%" id="table2" style="border-collapse: collapse" height="70%">
<tr>
<td>&nbsp;</td>
</tr>
</table>
<table border="0" width="100%" id="table3" style="border-collapse: collapse" height="30%">
<tr>
<td width="33%">
<p align="center">&nbsp;</td>
<td width="34%">
<p align="center">&nbsp;</td>
<td height="33%">
<p align="center">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>

This should be easy?? How do I accomplish this using css? Please help!