Dojo's nested BorderContainer disappear in IE

I have this terrible problem with IE 7/8/9.

I wrote an app using Dojo toolkit 1.8.0 and Play! framework. It works fine in all browser except for IE. Its 'developers tools' show no error, so does firebug. The problematic code section is here:

<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
    <div data-dojo-type="dijit.layout.ContentPane" id="head" region="top">
    </div>
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit.layout.ContentPane" id="menu" region="left">
        </div>
        <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
            <div data-dojo-type="dijit.layout.ContentPane" id="content_1" region="top">
            </div>
            <div data-dojo-type="dijit.layout.ContentPane" id="content_2" region="bottom">
            </div>
        </div>
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" id="foot" region="bottom">
    </div>
</div>

The result, in all browsers except for IE is like that:

But in IE it is shown like that:

Can anyone explain why there are such differences? At first I thought that in IE content is hidden, so I set overflow: auto, but no scrollbar appeared after page load.

The problem was with my custom class added to .menu element:

.menu {
    margin-right: auto;
    margin-left: auto;
}

This 2 styles broke my whole layout -.- When I removed it, it started to display properly.