title: Keep element inside visible part of window
body: <p>I have positioned a sidebar element at the right side of the visible part of the screen (this part already works!). The sidebar consists of several DIVs. A few of them I don't care about, but the last (lowest) one should not "disappear" when the user scrolls down the page. And here is where I'm stuck. In a way, the top position should <strong>not be &lt; 0</strong> of the visible top of the browser window. Is that even possible with CSS and the better browsers?</p>
  
  <p>Here is my definition of the sidebar:</p>
  
  <pre><code>div#sidebar{font-size:95%; float: right;width: 150px; margin-top:20px;}
  div#sidebar div{padding: 5px 0;margin-bottom: 5px}
  </code></pre>
  
  <p>Here is the element I would like to keep inside the visible part of the screen:</p>
  
  <pre><code>div#navtop{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px;}
  div#navsoc{background:#B3B3E3 url(/css/blue.jpg); margin-bottom:0px; top:!important 0px;}
  </code></pre>
  
  <p>The second element, "navsoc", should remain in the visible part. But it moves exactly like "navtop" and the others I have defined there.</p>
  
  <pre><code>&lt;div id="sidebar"&gt;
  &lt;div id="navsoc"&gt;
  keep me inside the window!
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>