title: Jquery animate script not working within table-cell layout
body: <p>I found this jQuery animate script -> <a href="http://jsfiddle.net/steweb/dsHyf/" rel="nofollow noreferrer">http://jsfiddle.net/steweb/dsHyf/</a> which works perfectly fine for me when I try it standalone. But as soon as I want to include it into my responsive layout using display: table-cell and %-widths everything looks out of place.</p>
  
  <p>I want the .full to fill out 100% of the width and height of the .cell.
  Is it possible to adjust this to fluid layouts instead of fixed widths? I have been trying for hours... Or is there a better solution?</p>
  
  <p>I simply want to exchange a first "tile" showing a headline with a second "tile" showing a text/list with a smooth animate effect.</p>
  
  <p>Plus I want to use this script multiple times on the same pages. What can I do?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="sidebar"&gt;
          &lt;h1&gt;Text&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
          &lt;div id="wrapper"&gt;
              &lt;div class="full" id="div1"&gt;&lt;/div&gt;
              &lt;div class="full" id="div2"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cell"&gt;
          &lt;div id="wrapper"&gt;
              &lt;div class="full" id="div1"&gt;&lt;/div&gt;
              &lt;div class="full" id="div2"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper{
      width:100%;
      overflow:hidden;
      position:relative;
      height:100%;
  }
  .full{
      position:absolute;
      width:100%;
      height:100%;
  }
  #div1{
      background:#FF0000;
      left:0px;
  }
  #div2{
      display:none;
      background:#FFFF00;
  }
  
  .container{
      display: table;
      width: 100%;
  }
  
  .cell{
      display: table-cell;
   }
  
  div.container div:nth-child(1){
     width: auto;
  }
  
  div.container div:nth-child(2), div.container div:nth-child(3){
     width: 40%
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('#div2').css('left',-$('#wrapper').width()).show();
  
  $('#div1').click(function(){
      $(this).animate({'left':$('#wrapper').width()});
      $('#div2').animate({'left':0});
  });
  
  $('#div2').click(function(){
      $(this).animate({'left':-$('#wrapper').width()});
      $('#div1').animate({'left':0});
  });
  </code></pre>