views:

35

answers:

1

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!

A: 

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 div a right: 0 to force the div to 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.

Yi Jiang
Hi, sorry, but this is not working, you can try it here:
wa_liu
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
wa_liu
@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.
Yi Jiang
oops, of course it works, thanks
wa_liu