title: CSS: Div to float down if page is scrolled
body: <p>I am trying to create a fixed div, so that even if i scroll down the page, the div remains in the center of the page. But I'm having a problem that some part of the div remains hidden even if scroll down the page. Please see this <a href="http://jsfiddle.net/yDPcN/" rel="nofollow">jsfiddle demo</a> to see the code and the problem.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="main"&gt;Normal div &lt;/div&gt;
      &lt;div class="box"&gt;This should be in the slide down if page is scrolled down.&lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      border: 1px solid green;
      width:500px;
      overflow:auto;
      margin:0 auto;
  }
  
  .main{
      border:1px solid blue;
       width:400px;
      float:right;
  }
  
  .box{
      border:1px solid red;
      width:85px;
      top:200px;
      position: fixed;
  }
  </code></pre>