title: left/margin-left value for a table-cell div
body: <p>I have this html:</p>
  
  <pre><code>&lt;div id="main"&gt;
     //contents
  &lt;/div&gt;
  </code></pre>
  
  <p>and this css:</p>
  
  <pre><code>#main {
     padding:10px;
     margin-top:5px;
     display:table-cell;
     font-family:Calibri;
     font-size:25px;
     background-color:#50aafb;
  }
  </code></pre>
  
  <p>and i have javascript that calculates how much to move the <code>main</code> div to left/margin-left. The div isn't moving because of the <code>display:table-cell</code> but i need that for something else...</p>
  
  <p><strong>How do i resolve this?</strong></p>
  
  <p><strong>UPDATE: <a href="http://jsfiddle.net/yueCM/" rel="nofollow noreferrer">http://jsfiddle.net/yueCM/</a></strong></p>
  
  <p><strong>UPDATE 2:</strong>
  Javascript:</p>
  
  <pre><code>$(window).load(function() {
     var l = ( $(document).width() - $('#main').width() ) / 2;
     $('#main').animate({marginLeft:l}, 200); 
  });
  </code></pre>
  
  <p><strong>SOLUTION (for me):</strong>
  changed <code>table-cell</code> to <code>table</code>.</p>
  
  <p><strong>SOLUTION (found by @Sparky672):</strong>
  <a href="https://stackoverflow.com/a/2986792/594235">https://stackoverflow.com/a/2986792/594235</a></p>
  
  <p>Wrap the <code>table-cell</code> div in another div (with <code>block</code> display for example) and apply the JS to that div.</p>