fixed sidebars

banish evil frames for good?

The holy grail for many web designers is for there to be some support for the position: fixed style rule. Unfortunately, only the stable versions of Gecko (Mozilla 1.0, Netscape 7.0 or better) and Opera 6.0 support it properly.

In theory, a sidebar on the left of the screen that is fixed with respect to the browser window, or viewport can be created with simple CSS. Let us consider a simple example. We want a sidebar that is positioned on the left. It is going to be 10em wide and extend from the top to the bottom of the viewport. Everything to the right of the sidebar will scroll like a normal document. The layout code is simple:

#fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 100%;
}


body > #fixed {
    position: fixed;
}


#content {
    margin-left: 10em;
}

Here we have our fixed sidebar, div.fixed and our scrolling content, #content. The reason the code uses position: absolute and then alters the div with body > div.fixed { position: fixed; } is that it is important to allow for browsers that don't support position: fixed at all.

but there's a problem

The most popular browser in the world is Microsoft Internet Explorer. At the time of writing, version 5.x has a 49% market share and version 6.x has a 41% market share. Both of these browsers fail to implement position: fixed correctly. Internet Explorer 6.0 has a special "standards mode" that works if the document you create has a proper DOCTYPE declared. If not, 6.0 reverts to "quirks mode", which effectively emulates version 5.5.

The "standards mode" can be forced to correctly implement position: fixed by using a workaround (commonly referred to as a hack) that uses a proprietary extension that Microsoft has engineered into Internet Explorer called Conditional Comments. First, an external stylesheet must be created with the following code:

html {
    overflow: hidden;
}


body {
    height: 100%;
    overflow: auto;
}

For this particular article, I have saved the stylesheet as IE6hack.css. Then I have added the following code, AFTER the style tag but still within the head of the page:

<!--[if IE 6]>
<link rel="stylesheet"
href="IE6hack.css"
type="text/css" />
<![endif]-->

Basically, if the browser encountered is Internet Explorer 6.0 (or better), the conditional comment loads the IE6hack.css style sheet. The effect is that Internet Explorer 6.x mimics the correct behavior of position: fixed. Unfortunately, nothing can be done (that I am aware of) for previous version of Internet Explorer unless some sort of scripting is used.

This is not quite the end of the story, however. If the browser window width is resized so that it is narrower than the width of some fixed-width content, such as an image or text within a pre element, the scrollbar will be overlapped and disappear, making it impossible for the user to scroll down the page. A horizontal scrollbar will not appear to help out the user. I have not been able to find a satisfactory solution to this. In this document, I have been forced to ensure anything I've put in pre tags has not been too wide, which is why I was forced to "spread out" the stylesheet reference in the previous code example. Fortunately, because this is part of the hack itself, it will not be a problem for non-Internet Explorer users.

update!

09/22/04: Wouter Schut has written to me with a solution to the scrollbar problem. Simply by adding width: 100%; to the body declaration in IE6hack.css, the scrollbar remains in place as expected. Thank you, Wouter.

jazz it up a bit

For this page, I have jazzed-up the fixed sidebar by placing links in it that take advantage of the display: block property of CSS. All I've done is apply the following style rules to the links within the fixed div:

#fixed a {
    display: block;
    text-decoration: none;
    padding: 0.5em;
    background: navy none;
    color: white;
    font-weight: bold;
    font-size: smaller;
    margin-bottom: 2px;
}


#fixed a:hover {
    background: red none;
    color: white;
}

Pretty straightforward, huh? Another advantage to this approach is that it means you can put markup for the fixed div at the end of your code. This means that visually-impaired users who are using a speech device to read the page won't keep reading out all the navigation links each time a new page is loaded.

information resource

You can find out more about conditional comments from the MSDN website. As always, the best way to understand what is happening in these articles is to view the source code, but remember that this particular article also has a small, attached style sheet to make the Internet Explorer hack work. Thank you for reading.