div with unkown height and width

[liunx]

I'm trying to make a div that is 50 pixles from one side of the browser, 60 from another, 70 from another, and 80 from another. This means I don't know the height or width of the div. So, I've tried:<div style='overflow:auto; position:absolute; top:50px; left:60px; right:70px; bottom:80px;'>Text that goes in the div</div><br />
Now this works fine in Mozilla, but in IE it ignores the 'bottom' attribute and just expands the div to fit the text, not what I want.<br />
<br />
So I thought that I might be able to use javascript to get the size of the browser and just subtract the 'border' to get the width and height:<br />
<br />
<script language='JavaScript'><br />
function GetWidth()<br />
{<br />
var width = 0;<br />
if( typeof( window.innerWidth ) == 'number' )<br />
{<br />
//Non-IE<br />
width = window.innerWidth;<br />
}<br />
else<br />
{<br />
if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )<br />
{<br />
//IE 6+ in 'standards compliant mode'<br />
width = document.documentElement.clientWidth;<br />
}<br />
else<br />
{<br />
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )<br />
{<br />
//IE 4 compatible<br />
width = document.body.clientWidth;<br />
}<br />
}<br />
}<br />
return width;<br />
}<br />
<br />
function GetHeight()<br />
{<br />
//same as GetWidth() but gets the height<br />
}<br />
</script><br />
<br />
<div style='overflow:auto; postion:absolute; top:50px; left:60px; width: javascript::GetWidth(); height: javascript::GetHeight();'><br />
Text goes here<br />
</div><br />
<br />
<br />
but that gives the same problem in IE<br />
<br />
Thanks in advanced<!--content-->Tested in: IE5.5 Moz 1.3 NN6.2<br />
<br />
Why do you need to know the height of the <div> if you're telling it to be 50px from the top and 80px from the bottom of the browser window? This is a cross browser method using page margins, if no width is specified the <div> will use all of the available width.<br />
<br />
CSS in head of page:<br />
<br />
<style type="text/css"><br />
<!--<br />
body { color: #000000;<br />
background: #ffffff;<br />
margin: 50px 70px 80px 60px }<br />
--><br />
</style><br />
<br />
div code:<br />
<br />
<div style="overflow: auto; height: 100%; border: 1px solid #000000"><br />
<p>blah blah</p><br />
<p>blah blah</p><br />
<p>add more paragraphs to get the scrollbar</p><br />
</div><br />
<br />
The CSS border is there just so you can see the div while work is in progress.<!--content-->