CSS Woes » Getting position:fixed to work on IE

posted April 25, 2008

Like I mentioned in another post, having a div with a position:fixed doesn’t work in lower versions of IE; but IE7 beta 2 apparently works, but you have to declare the document as strict:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

In this tutorial, I’ll show you a way to get around this and implement a fake “position:fixed.”

We will basically be making another <body></body> tag. We’ll call this “fakebody.”

The CSS:

body
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding:0px;
    margin:0px;
    overflow:hidden;
}
#fakebody
{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow:auto;
}

Explanation:

Set the body with the properties that you normally would, but there should be one addition to it, overflow:hidden. This is because we don’t want the body to be scrolling if there is a need to.

“fakebody” is positioned absolutely at the very top left of the window and set to span the entire window. The overflow:auto doesn’t have to be set, but I just set it just for the sake of setting it.

The main idea is to make “fakebody” scroll and the body to remain still. Thus, you would want to put everything you want to be “fixed” outside of “fakebody” but still inside the body, of course.

Now some additions to the CSS:

#container
{
    position:relative;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    padding:0px;
    text-align: left;
}

Explanation:

If you don’t usually do a container div, then you don’t need to use this part. “container” is the usual centered container div for the regular flow of content.

Now for the “fixed”:

#fixed
{
    position:absolute;
    top:0px;
    left:100px;
    background:#CCC;
    width:100px;
    height:100px;
    display:block;
    padding:10px;
    text-align:center;
}

Explanation:

For “fixed,” the only necessary property is position:absolute. This is absolutely positioned relatively to the body, not to the “fakebody.”

Now the HTML:

<div id="fakebody">
    <div id="container">
        Regular content goes here.
    </div>
</div>
<div id="fixed">
    Fixed content goes here.
</div>

Explanation:

The most important thing to make note of in this tutorial is the placement of “fixed.” It’s placed outside of “fakebody.” This is so that, as “fakebody” is scrolled through, “fixed” doesn’t scroll along with it.