PDA

Click to See Complete Forum and Search --> : percentage not pixels??

dkirk
12-27-2007, 08:37 PM
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!
Wisest Guy
12-27-2007, 08:57 PM
CSS accepts percentages as height values.
dkirk
12-27-2007, 09:07 PM
check out the code below, why does this not work?
css:

}
#wrapper {
width: 85%;
margin: 0 auto;
text-align: left;
height: 100%;
background-color: Gray;
}
#top {
height: 70%;
background-color: Blue;
}
#bottom {
height: 30%;
background-color: Fuchsia;
}

html:

<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="top">
</div>
<div id="bottom">
</div>
</div>
</form>
</body>

this does not fill the page....
ray326
12-27-2007, 09:38 PM
body, html { height:100% }
dkirk
12-28-2007, 07:05 AM
Many thanks to all, I'm straight....