title: Setting absolute positioned DIV to the same y-coordinate of another DIV using jQuery offset()
body: <p>I can't seem to find the answer on the internet, and the jQuery offset() doesn't seem to be working as intended. Here's the situation:</p>
  
  <p>What I am trying to do is vertically align to two divs. One is an inline-block with indeterminate location (y-coordinate depends on how much proceeding content there is.) The other div has complimentary information, and I want it to sit to the side of the other div in a margin like area of the site.</p>
  
  <p>To my understanding of how jQuery.offset() works, that should be able to acquire the coordinates of the content div relative to the document, which can then be used to assign the absolute position of the marginal div. However, when I call offset() on the content div, I get a position of (0px,0px) which is clearly inaccurate.</p>
  
  <p>Am I going about this the wrong way?</p>
  
  <p>Here is my code: </p>
  
  <pre><code>// Find the div we want to position to (works)
  var related_node = $('#content-note-n').attr('data-nid');
  var node_obj = $('#node-' + related_node);
  // Get the offset position of that div (does not work- returns 0,0)
  var position = node_obj.offset();
  alert("Top: " + position.top);
  $('#content-note-n').css('top', position.top);
  </code></pre>
  
  <p>Here is the relevant HTML (I'm using a CMS, so this is vastly simplified):</p>
  
  <pre><code>&lt;section id="zone-content"&gt;
    &lt;aside id="region-side"&gt;
       &lt;div id="content-note-n" data-nid="n"&gt;
         &lt;h3&gt;Note N&lt;/h3&gt;
       &lt;/div&gt;
    &lt;/aside&gt;
    &lt;div id="region-content"&gt;
      &lt;div id="node-n"&gt;
        &lt;div class="node-content"&gt;
           &lt;p&gt;Content for Node N&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Can post CSS if that also helps, but none of the elements are display=none, which jQuery says will break offset().</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Have tried copying my exact code into jsFiddle (excluding css), and it works as intended there. Will now try copying over css.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Copied over all of the CSS too into jsFiddle, and it works still. I'm so confused.</p>