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..