title: Using Javascript to move elements positioned using CSS Top Bottom Left Right
body: <p>I have a container that does not have any set dimensions. I want the size of the container to be driven by it's contents. Like so:</p>
  
  <pre><code>    #containerTL{
      position:absolute;
      bottom: 0px;
      right: 0px;
      margin: 5px;
      border: 1px solid black;
      cursor: default;    
      }
  
      #content{
      position:relative;
      background: gray;
      margin: 0px;
      top: 0px;
      height: 100px;
      width: 120px;
      cursor: default;    
      }
  
      &lt;div id="containerTL"&gt;&lt;div id="content"&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I also want to move the position of the container and have it's contents come along for the ride. Setting the position by modifying the containers style.top &amp; style.left is easy, the problem I have is that the elements may be positioned using "bottom" or "right". Without set dimensions, the container grows, rather than move when I set the top and left properties.</p>
  
  <p>I think I understand the problem. Lets say the style specifies a bottom and left position, and I update the top and left properties using javascript, the top and left properties get set, but the style specifies a bottom property.</p>
  
  <p>I suppose I could always set the bottom and right properties to "auto" once I update top and left... but what if I wanted to be able to send each element back to it's original position, generically, without writing a special case for each element.</p>
  
  <p>Here's a fiddle to illustrate the problem: <a href="http://jsfiddle.net/HVXFT/" rel="nofollow">fiddle</a></p>