Getting proper height for div

raghu207

01-12-2008, 07:06 AM

I have an absolutely positioned element (image) at the very bottom of the page which is about 20px in height using this css:
#bottomdiv {
position:absolute;
bottom:0;
}

Now, i want another div to extend from *nearly* the top of the page to right above the absolutely positioned element. I cannot set this div height in px as i am trying to make it resolution independent.

I did this by setting the following css rule to the element:
#mydiv {
position:absolute;
top:5%;
bottom:10pt;
border:1px solid #333333;
}
but it does not work in IE6! :(

How can i make this work?

Thanks in advance!
raghu207

Excavator

01-12-2008, 07:19 AM

Hello raghu207,
Does this work?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
background: #CCCCCC;
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#mydiv {
position:absolute;
top:5%;
height: 85%;
width: 100%;
background: #00FF00;
}
#bottomdiv {
position:absolute;
bottom:0;
height: 10%;
width: 100%;
background: #FF9999;
}

</style>
</head>
<body>
<div id="mydiv"></div>
<div id="bottomdiv"></div>
</body>
</html>

raghu207

01-12-2008, 12:28 PM

Thanks, it worked! :)