left/margin-left value for a table-cell div

Question

I have this html:

<div id="main">
   //contents
</div>

and this css:

#main {
   padding:10px;
   margin-top:5px;
   display:table-cell;
   font-family:Calibri;
   font-size:25px;
   background-color:#50aafb;
}

and i have javascript that calculates how much to move the main div to left/margin-left. The div isn't moving because of the display:table-cell but i need that for something else...

How do i resolve this?

UPDATE: http://jsfiddle.net/yueCM/

UPDATE 2: Javascript:

$(window).load(function() {
   var l = ( $(document).width() - $('#main').width() ) / 2;
   $('#main').animate({marginLeft:l}, 200); 
});

SOLUTION (for me): changed table-cell to table.

SOLUTION (found by @Sparky672): https://stackoverflow.com/a/2986792/594235

Wrap the table-cell div in another div (with block display for example) and apply the JS to that div.

Answer 1

Use inline-block instead of table-cell : demo

#main is just the wrapper, it won't hurt. Browser support is similar: inline-block , table-cell.

For IE<8 support, add:

*zoom: 1;
*display: inline;