Here is the HTML I am trying to get working. In firefox, the HTML fills
the entire window with a scrollbar in the red div. I can resize the
page and the page is still completely filled. However, when I go to
internet explorer and try it, it appears that it ignores bottom and
right and as a result does not fill the entire screen.
I would like this to work in IE the same as it does in firefox. Can
someone suggest some better styles?
<html>
<head>
<style>
#top {
position: absolute;
top: 0px;
height: 50px;
left: 0px;
right: 0px;
background: blue;
}
#left {
position: absolute;
top: 50px;
height: 100px;
left: 0px;
width: 75px;
background: green;
}
#right {
position: absolute;
top: 50px;
height: 100px;
left: 75px;
right: 0px;
background: red;
overflow: auto;
}
#bottom {
position: absolute;
top: 150px;
left: 0px;
right: 0px;
bottom: 0px;
background: yellow;
}
</style>
</head>
<body>
<div id="top">text</div>
<div id="left">text</div>
<div
id="right">textasjdncakjlsncasdcjnasdlcasdcasncasl kjcnaljkdncalksjdncalksjc
naklsjdcnajklscnlaksjdcnalkjsdcnalkjsncalskjcnalks ncalskncaslkjcnaslkjcnalsjknca
lksjcnalkscnalksjncalksjcnalksncalskncalskncalsknc ajlksncajlksdncakljscnajklsnca
jlksdnca</div>
<div id="bottom">text</div>
</body>
</html>
