Значение left/margin-left для div ячейки таблицы

Question

У меня есть этот HTML:

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

и это css:

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

и у меня есть JavaScript, который рассчитывает, сколько переместить main div слева / margin-left. Див не движется из-за display:table-cell но мне это нужно для чего-то другого...

Как мне решить это?

ОБНОВЛЕНИЕ: http://jsfiddle.net/yueCM/

ОБНОВЛЕНИЕ 2: Javascript:

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

РЕШЕНИЕ (для меня): изменилось table-cell в table,

РЕШЕНИЕ (найдено @ Sparky672): /questions/2404048/css-cell-margin/2404105#2404105

Обернуть table-cell div в другом div (с block например, отобразить) и применить JS к этому div.

Answer 1

Использование inline-block вместо table-cell: demo

#main это просто обертка, это не повредит. Поддержка браузера похожа: inline-block, table-cell,

Для поддержки IE<8 добавьте:

*zoom: 1;
*display: inline;