CSS Semi-Absolutely Positioned Element when Scrolling

Question

I have 3 columns that look something like this:

<div style="width:900px;margin:0 auto" id="container">
  <div style="width:100px; float:left">
    left
  </div>
  <div style="width:600px; float:left">
    main
  </div>
  <div style="width:200px; float:left" id="nav-col">
    <div id="navigation-list">
    </div>
  </div>
</div>

Not sure if this is possible, but I want the #navigation-list to stay on the screen whenever the window scrolls. It should stay about 100px down from the top of the document.body and also between left and right coordinates of the #nav-col

The main difficulty is that the #container will center itself dynamically when the window is resized.

Is there a way to do this in pure CSS?

Answer 1

I thinks its not possible with pure CSS..

You would need to use position:fixed on that element, but then it would not respect its container at all..

Answer 2

The trick is to use position: relative on the enclosing container. Actually, it works sufficiently to just not specify left or top after position: fixed. That seems to do the trick. I also moved your styles into the CSS, and removed the 900px width (for testing purposes).

CSS

#container {
    position: relative;
    margin: 0 auto;
}

#container #left {
    float: left;
    width: 100px;
}

#container #main {
    padding-right: 200px;
    padding-left: 100px;
}

#container #nav-col {
    float: right;
    width: 200px;
    margin-left: -200px;
}

#container #navigation-list {
    position: fixed;
}​

HTML

<div id="container">
    <div id="left">
        left<br /> left<br /> left<br />
        left<br /> left<br /> left<br />
    </div>
    <div id="nav-col">
        <div id="navigation-list">
            nav<br /> nav<br /> nav<br />
            nav<br /> nav<br /> nav<br />
        </div>
    </div>
    <div id="main">
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
        main<br /> main<br /> main<br /> main<br /> main<br /> main<br />
    </div>
</div>​