Hello, I have the following code:
<html>
<head>
<style type="text/css">
DIV#left
{
z-index: 100;
position:absolute;
left:0px;
top:0px;
width: 100px;
height: 100px;
background-color: #e7e7e7;
}
DIV#right
{
z-index: 100;
position:absolute;
left:100px;
top:0px;
width: 100px;
height: 100px;
background-color: #e20074;
}
</style>
</head>
<body>
<div id="left">
1
</div>
<div id="right">
2
</div>
</body>
</html>
But I need the right div section to be expanded to the end of the page (width=100%) So here is how I changed the width for DIV#right:
width: expression(parseInt(document.body.offsetWidth)-100);
Unfortunately, this doesn't work with IE any more! IE8 and firefox ignore expressions. How can I overcome this issue?
Many thanks in advance!
-
You shouldn't use CSS expressions like that - they're slow, old, and most importantly, proprietary, meaning it won't work on anything other than IE.
Here's a simple solution that works on Firefox, IE8 and IE7 [but not IE6 though]: Give the right
divaright: 0to force thedivto expand out all the way to the end of the page:#right { position: absolute; left: 100px; top: 0; right: 0; height: 100px; }See: http://jsfiddle.net/hEeVY/
If you're using expressions for anything, it's probably better off to use Javascript to achieve the same effect.
wa_liu : Hi, sorry, but this is not working, you can try it here:wa_liu : http://www.w3schools.com/html/tryit.asp?filename=tryhtml_introYi Jiang : @wa_liu No, I can't see that - that code playground thingy is only visible to you, since its not saved. If you need to show me anything, you can try using jsfiddle instead.wa_liu : oops, of course it works, thanks
0 comments:
Post a Comment