Absolutely positioned element across the screen

Snib · December 13th, 2004, 10:13 PM

Hello,

I am trying to get an absolutely positioned DIV element to stretch from the left to the right of the screen. I am targeting this for IE only, so IE-specific methods are fine.

I am setting the property with JavaScript, but the problem is with CSS.

I have tried:

myElement.style.width = document.body.clientWidth;
and
myElement.style.width = "100%";
and
myElement.style.width = "100%";
document.body.style.width = "100%";

Right now, I'm using

myElement.style.width = "99.7%";

but I doubt it works in all conditions.

Is there one perfect way to accomplish this for IE?

-Snib - http://www.snibworks.com
Where will you be in 100 years?

richard.york · December 15th, 2004, 08:15 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            body {
                padding: 0;
                margin: 0;
            }
            div {
                position: absolute;
                width: 100%;
                height: 10px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

This is a simple testcase using percentage width. If you don't make the padding and margin of the <body> element zero, then you wind up with scroll bars since a percentage width is based on the width of the parent block. If you still want to have padding and or margins on the body element, or whatever other containing element. Then the solution is to use:

div {
   position: absolute;
   left: 0;
   right: 0;
   height: 10px;
}

But of course that doesn't work in IE. For IE, then, some hacking is in order.

width: expression();

expression(); can take some javascript from within the style sheet. What you need is to get the width of the <body> element, then subtract the values of the <body> element's margin, padding, and borders from that width.

width: expression();

I haven't experimented much with this feature, so you might want to read up on it on MSDN to see what it allows.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

Snib · December 15th, 2004, 02:21 PM

Thanks Rich, I will look into this and let you know how it goes.

-Snib - http://www.snibworks.com
Where will you be in 100 years?