title: Fixed position and float not working correctly
body: <p>I am trying to create a section in my site where the is a scrolling section on my site and a section right next to it that doesn't move. Here is my code:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
          &lt;div id="feed"&gt;
          &lt;/div&gt;
          &lt;div class="right_wrapper"&gt;
            &lt;div class = "top_right_wrapper";&gt;
              &lt;div class = "top_right_title_wrapper"&gt;
                &lt;div class="top_right_title"&gt;
                Title
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class = "mid_right_wrapper";&gt;
            &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>div.wrapper{
  width: 1110px;
  margin: auto;
  }
  
   div.right_wrapper{
  height: 100%;
  width: 300px;
  float:right;
  position:fixed;
  }
  
  div.top_right_wrapper{
  height: 150px;
  width: 300px;
  background-color: white;
  box-shadow: 0px 1px 2px #888888;
  float:right;
  }
  
  div.mid_right_wrapper{
  height: 300px;
  width: 300px;
  margin-top: 3px;
  background-color: white;
  box-shadow: 0px 1px 2px #888888;
  float:right;
  }
  
  div.top_right_title_wrapper{
  height: 40px;
  width: 150px;
  padding:0;
  }
  
  div.top_right_title{
  font-family: "Open Sans";
  font-weight: bold;
  padding: 8px;
  color: #2F4F4F;
  }
  </code></pre>
  
  <p>I have an id <code>feed</code> which gets different divs from an ajax call. It is an infinite scroll type feed. I also have a <code>top_right_wrapper</code> which is supposed to be right next to it on to the top right. It should look like this:</p>
  
  <pre><code>------------- ****
  ------------- ****
  ------------- ****
  -------------
  -------------
  -------------
  </code></pre>
  
  <p>The scroll is the <code>--</code> and the top_right_wrapper is the <code>**</code>. When my current code is doing this with fixed position:</p>
  
  <pre><code>****--------- 
  ****--------- 
  ****--------- 
  ------------- 
  ------------- 
  ------------- 
  </code></pre>
  
  <p>If I take away the fixed position, it goes to the very bottom of the page like this after all the data. It flashes in the correct place then disappears to the bottom:</p>
  
  <pre><code>-------------
  ------------- 
  ------------- 
  ------------- ****
  ------------- ****
  ------------- ****
  </code></pre>
  
  <p>Any one know how to solve this?</p>