R
Robert Larsen
Hi
I am trying to get make a div the correct size. I need three areas:
left, center and right. The left and right should have fixed width and
the center should grow or shrink to fit the rest. The following works
perfectly in Firefox, but not in IE:
<html>
<head>
<style>
html, body { background-color: white; margin: 0px; padding:
0px; height: 100%; }
.top { position: absolute; width: 100%; height: 65px;
background-color: blue; }
.left { position: absolute; top: 70px; bottom: 0px; left:
0px; width: 150px; background-color: red; }
.middle { position: absolute; top: 70px; bottom: 0px; left:
155px; right: 205px; background-color: green; }
.right { position: absolute; top: 70px; bottom: 0px; right:
0px; width: 200px; background-color: yellow; }
</style>
</head>
<body>
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</body>
</html>
Can anybody tell me how to make this work in all browsers ?
I am trying to get make a div the correct size. I need three areas:
left, center and right. The left and right should have fixed width and
the center should grow or shrink to fit the rest. The following works
perfectly in Firefox, but not in IE:
<html>
<head>
<style>
html, body { background-color: white; margin: 0px; padding:
0px; height: 100%; }
.top { position: absolute; width: 100%; height: 65px;
background-color: blue; }
.left { position: absolute; top: 70px; bottom: 0px; left:
0px; width: 150px; background-color: red; }
.middle { position: absolute; top: 70px; bottom: 0px; left:
155px; right: 205px; background-color: green; }
.right { position: absolute; top: 70px; bottom: 0px; right:
0px; width: 200px; background-color: yellow; }
</style>
</head>
<body>
<div class="top">Top</div>
<div class="left">Left</div>
<div class="middle">Middle</div>
<div class="right">Right</div>
</body>
</html>
Can anybody tell me how to make this work in all browsers ?