title: Why am I getting a different in div location?
body: <p>So I've created an image tagger that saves coordinates to the the database, and then I call those coordinates with an erb block on the main page which displays a div at said location (.tagged). However when the tags are displayed on the main page, they are not in the location they were in when I tagged them in the connections page. Anyone have any ideas as to why this is? Thanks in advance. </p>
  
  <p><a href="http://jsfiddle.net/NF3jn/3/" rel="nofollow">Main page results</a></p>
  
  <p><a href="http://jsfiddle.net/filkinsteez/vATcn/29/" rel="nofollow">Image tagger on connections page</a></p>
  
  <p>ERB on the main page:</p>
  
  <pre><code>&lt;% if @new_manual.present? %&gt;
  &lt;% n = 0 %&gt;
  &lt;% @new_manual.steps.each do |step| %&gt;
      &lt;% n += 1 %&gt;
  
      &lt;% i_connection = Contact.find(step.input_contact) %&gt;
          &lt;span class="i_contact i_contact&lt;%= n %&gt;" data-pos-x="&lt;%= i_connection.pos_x %&gt;" data-pos-y="&lt;%= i_connection.pos_y %&gt;"  data-pos-width="&lt;%= i_connection.pos_width %&gt;" data-pos-height="&lt;%= i_connection.pos_height %&gt;" ="spanid&lt;%= n %&gt;" data-index="&lt;%= n %&gt;"&gt;&lt;/span&gt;
  
  
      &lt;% o_connection = Contact.find(step.output_contact) %&gt;
          &lt;span class="o_contact o_contact&lt;%= n %&gt;" data-pos-x="&lt;%= o_connection.pos_x %&gt;" data-pos-y="&lt;%= o_connection.pos_y %&gt;"  data-pos-width="&lt;%= o_connection.pos_width %&gt;" data-pos-height="&lt;%= o_connection.pos_height %&gt;" id="spanid&lt;%= n %&gt;" data-index="&lt;%= n %&gt;"&gt; &lt;/span&gt;
          &lt;% cord = CordType.find(step.contact_item) %&gt;
  
  
  &lt;div class="main_panel"&gt;
  &lt;div style='margin: auto; width: 600px;'&gt;
      &lt;div id="image_panel&lt;%= n %&gt;" style="float:left; width:600px; position:relative;"&gt;
          &lt;%= image_tag(i_connection.image.image.url(:large)) %&gt;
  &lt;div class="i_tagmap&lt;%= n %&gt;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main_panel"&gt;
  &lt;div style='margin: auto; width: 600px;'&gt;
      &lt;div id="image_panel&lt;%= n %&gt;" style="float:left; width:600px; position:relative;"&gt;
  
          &lt;%= image_tag(o_connection.image.image.url(:large)) %&gt;
  &lt;div class="o_tagmap&lt;%= n %&gt;"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  &lt;/div&gt;  
  &lt;/div&gt;
  
  &lt;% end %&gt;   
  &lt;% end %&gt;
  </code></pre>