home > toc > position:fixed fixed > IE>=5 > fixed vertical bar

Fixed vertical bar for IE>=5/win

Acid tests

In your head

<style type="text/css">
@import "/_css/fixed/ie5/y-all.css";
</style>
<!--[if IE]>
<link
 href="/_css/fixed/ie5/y-ie.css"
 rel="stylesheet"
 type="text/css"
 media="screen">
<script type="text/javascript">
onload = function() { content.focus() }
</script>
<![endif]-->

Contents of y-all.css

@media screen
  {
  body
    {
    margin: 0;
    padding: 0 0 0 12em;
    font-size: 1em;
    }
  div#fixedBox
    {
    overflow: auto;
    height: 100%;
    width: 12em;
    position: fixed;
    top: 0;
    left: 0;
    background: #ddd;
    }
  div#fixedBox h1,
  div#fixedBox h2,
  div#fixedBox p,
  div#fixedBox address,
  div#fixedBox div,
  div#fixedBox pre
    {
    margin: 0;
    padding: 20px;
    }
  div#content
    {
    padding: 1em;
    }
  }

Contents of y-ie.css

body
  {
  height: 100%;
  overflow: hidden;
  font-size: 100%;
  }
div#content
  {
  width: 100%;
  height: 100%;
  overflow: auto;
  }
div#fixedBox
  {
  position: absolute;
  }

2004 Eric Bednarz

The quick brown fox would like to jump over some lazy dogs but is stuck in this box.