title: jQuery: Relocate absolute-position of DIV (top & left properties) on WINDOW RESIZE
body: <p>Language: <strong>jQuery</strong></p>
  
  <p>I have a bunch of DIVs on a page.<br>
  I'm trying to change their <strong>absolute-position</strong> (top/left properties) each time the window resizes (to make them proportional to the viewport, while maintaining their original layout).</p>
  
  <ul>
  <li><strong>jsFiddle:</strong> <a href="http://jsfiddle.net/kjvSc/1/" rel="nofollow noreferrer">http://jsfiddle.net/kjvSc/1/</a></li>
  </ul>
  
  <p>I am successful at changing the width &amp; height of my DIVs <strong>(but this is not my concern, never mind that, because I am going to change font + width &amp; height via Media Queries)</strong>, my main concern lies at being unable to adjust these DIVs' top/left positioning.</p>
  
  <p>I am almost there, but can't figure out how to make this work?</p>
  
  <p>User <strong><a href="https://stackoverflow.com/users/79677/chris-barr">Chris Barr</a></strong> <a href="https://stackoverflow.com/a/13853418/1399030">played with this for a bit</a>, but was not able to get very far:</p>
  
  <ul>
  <li><strong><a href="https://stackoverflow.com/users/79677/chris-barr">Chris Barr</a></strong>'s <strong>jsFiddle:</strong> <a href="http://jsfiddle.net/kjvSc/4/" rel="nofollow noreferrer">http://jsfiddle.net/kjvSc/4/</a><br>
  What he has done was successfully &amp; proportionally relocate/change the DIVs' <strong>top/left</strong> properties on window resize. I have noticed, however, that the DIVs do not initially load in their original places (as specified in their style).</li>
  </ul>
  
  <p>Here is the Javascript that I am using:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      // THIS GETS WIDTH OF CONTAINER
      var cw = $('#container').width();
      // THIS GETS ORIGINAL FONT SIZE
      var fontSize = $('.box').css('font-size');
      // THIS GETS ORIGINAL ABSOLUTE POSITION OF DIV
      var left = $('.box').css('left');
  
      $(".box").width(cw / 5).height(cw / 5);
      $('.box').css("font-size", fontSize / 5 + "px");
      $('.box').css("left", left / 5 + "px");
  
      $(window).resize(function() {
      // THIS GETS WIDTH OF CONTAINER
      var cw = $('#container').width();
      // THIS GETS ORIGINAL FONT SIZE
      var fontSize = $('.box').css('font-size');
      // THIS GETS ORIGINAL ABSOLUTE POSITION OF DIV
      var left = $('.box').css('left');
  
      $(".box").width(cw / 5).height(cw / 5);
      $('.box').css("font-size", fontSize / 5 + "px");
      $('.box').css("left", left / 5 + "px");
      });
  });​
  </code></pre>
  
  <p>You can view it in action here - <strong>jsFiddle:</strong> <a href="http://jsfiddle.net/kjvSc/1/" rel="nofollow noreferrer">http://jsfiddle.net/kjvSc/1/</a></p>
  
  <p>Any help &amp; guidance would be greatly appreciated!</p>