Dojo's nested BorderContainer disappear in IE

Question

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.

Answer 1

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.

Answer 2

two possible reasons come to mind:

1. you don't have a 'center' element for the content container - afaik, the dojo spec requires one BorderContainerChild with region="center" or non region specified, which defaults to center

2. do you have any non-layout elements in your markup as direct child of BorderContainer? IE for once is more standard requiring and breaks on unclear markup in this cases