title: Slide a div off screen (with margin: 0px auto)
body: <p>I have a horizontally centered div <code>#box1</code> that has <code>margin: 5px auto</code> that has to slide to the left and off the screen, while <code>#box2</code> slides into the screen from the right, when the button <code>.class</code> is clicked on. I've seen how its done for absolutely positioned divs, now how do you do it if its not?</p>
  
  <p><strong>HTML Structure</strong></p>
  
  <pre><code>&lt;div class="button"&gt;&lt;a href="#"&gt;Slide&lt;/a&gt; &lt;/div&gt;
  
  &lt;div id="container"&gt;
  
      &lt;div id="box1" class="box"&gt;Box #1&lt;/div&gt;
      &lt;div id="box2" class="box"&gt;Box #2&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Failed attempt</strong></p>
  
  <pre><code>$(".button").click(function() {
      $("#box1").css('margin-left', 0);
      $("#box1").css('margin-right', 0);
      $("#box1").animate({
              left: '150%',
          }, 'slow' );
  
  });
  </code></pre>