title: Move DIV off screen without messing with width?
body: <p>I have an eCommerce cart I am working on, and when a button is clicked, the cart slides out from the left of the screen. I have that part working fine.</p>
  
  <pre><code>&lt;section class="ec-cart"&gt;
      &lt;h3&gt;Cart&lt;/h3&gt;
  &lt;/section&gt;
  
  &lt;div class="main-content"&gt;
      &lt;div class="overlay-wrap"&gt;&lt;/div&gt;
      &lt;p&gt;Text text text&lt;/p&gt;
      &lt;a class="cart-btn" href="#"&gt;Your Cart&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the <code>.cart-btn</code> link is clicked, the <code>.ec-cart</code> slides out fine, but the <code>.main-content</code> does not slide off of the screen like I need it to. I need it to KEEP THE SAME WIDTH, and just slide off the screen to the right the same amount as the width of the cart.</p>
  
  <p>This JS Fiddle example shows what I have: <a href="http://jsfiddle.net/RNmaq/" rel="nofollow">http://jsfiddle.net/RNmaq/</a></p>
  
  <p>As seen in the JSFiddle example above, the width of the container shrinks when the cart comes into view.</p>
  
  <p>This website shows what I am going for. If you click the cart button in the top right:
  <a href="http://bit.ly/1gJiy1a" rel="nofollow">http://bit.ly/1gJiy1a</a></p>
  
  <p>I am achieving the effects thus far by toggling classes. I am open to other suggestions if there is an easier way to do this. Any help would be greatly appreciated.</p>