Fixed positioning within Internet Explorer 5-6

The menu is fixed, and elastic too (increase/decrease the text size to see it working)

Tested successfully in the following browsers:

A quick breakdown

Just a basic layout (put what you like inside <div id="container">):


<body>
   <div id="container">
      <h1>Heading</h1>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
   </div>

   <div id="navigation">
      <ul>
         <li><a href="#">Item one</a></li>
         <li><a href="#">Item two</a></li>
         <li><a href="#">Item three</a></li>
         <li><a href="#">Item four</a></li>
         <li><a href="#">Item five</a></li>
      </ul>
   </div>
</body>

Some basic CSS (and the numeric values here are all up to the designer):


body {
   padding:0 0 0 14em;
}

#navigation {
   position: fixed;
   top: 2em;
   left: 0;
   width: 12em;
}

And finally, the CSS fixes for IE5-6 (use Microsoft's conditional comments feature, like this
<!--[if lt IE 7]>...css file...<![endif]-->):


html, body {
   height: 100%;
   overflow: hidden;
   width: auto;
}

div#container {
   padding:0;
   margin:0;
   height: 100%;
   overflow: auto;
   position: relative;
}

#navigation {
   position: absolute;
   z-index: 100;
   overflow: hidden;
}

IE now plays ball! :)

Return to blog entry