title: Positioning absolute div inside relative parent - webkit browsers
body: <p>My HTML basically looks like this:</p>
  
  <pre><code>&lt;div id="#container"&gt;
    &lt;div id="left_col"&gt;
      left stuff
    &lt;/div&gt;
    &lt;div id="middle_col"&gt;
      middle stuff
    &lt;/div&gt;
    &lt;div id="right_col"&gt;
       &lt;div id="anchor"&gt;&lt;/div&gt;
       &lt;div id="floater&gt;
         The problem div
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The container div is pushed 82px to the left, because I don't want the rightmost column to be used as part of the centering (there is a header navigation bar above that is the size of left_col and middle_col):</p>
  
  <pre><code>#container {
      width: 1124px;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
      color: #656f79;
      position: relative;
      left: 82px;
  }
  
  #left_col {
      float:left;
      width: 410px;
      background-color: #fff;
      padding-bottom: 10px;
  }
  
  #middle_col {
      width: 545px;
      float: left;
  }
  
  #right_col {
      float: left;
      width: 154px;
      margin-left: 5px;
      position:relative;
  }
  
  #floater {
      width: 154px;
  }
  </code></pre>
  
  <p>I'm using the following javascript to keep the #floater div in position as you scroll down the page:</p>
  
  <pre><code>var a = function() {
      var b = $(window).scrollTop();
      var d = $("#anchor").offset().top;
      var c = $("#floater");
      if (b &gt; d) {
          c.css({position:"fixed",top:"10px"});
      } else {
          c.css({position:"absolute",top:""});
      }
  };
  $(window).scroll(a);
  a();
  </code></pre>
  
  <p>The problem I'm having is that in WebKit based browsers, once jQuery makes the floater div's positioning fixed so it will stay 10px from the top, that "left: 82px" from #container goes out the window, causing #floater to jump 82px to the left. This doesn't happen in FF or IE. Does anybody know a solution to this?</p>
  
  <p><strong>Update: Solved</strong></p>
  
  <p>I've solved this problem by not using fixed positioning, but instead using absolute positioning. I changed the javascript to set the top CSS property of div#floater to be based on the value $(window).scrollTop() if div#anchor's top offset is greater than $(window).scrollTop(). Pretty simple. </p>
  
  <p>So the a() function now looks like this:</p>
  
  <pre><code>var a = function() {
      var b = $(window).scrollTop();
      var d = $("#anchor").offset().top;
      var c = $("#floater");
      if (b &gt; d) {
          var t = b-200; //200px is the height of the header, I subtract to make it float near the top
          c.css({top:t+"px"});
      } else {
          c.css({top:""});
      }
  };
  </code></pre>