title: Dojo's nested BorderContainer disappear in IE
body: <p>I have this terrible problem with IE 7/8/9.</p>
  
  <p>I wrote an app using <code>Dojo toolkit 1.8.0</code> and <code>Play! framework</code>. It works fine in all browser except for IE. Its 'developers tools' show no error, so does firebug. The problematic code section is here:</p>
  
  <pre><code>&lt;div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'"&gt;
      &lt;div data-dojo-type="dijit.layout.ContentPane" id="head" region="top"&gt;
      &lt;/div&gt;
      &lt;div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'"&gt;
          &lt;div data-dojo-type="dijit.layout.ContentPane" id="menu" region="left"&gt;
          &lt;/div&gt;
          &lt;div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'"&gt;
              &lt;div data-dojo-type="dijit.layout.ContentPane" id="content_1" region="top"&gt;
              &lt;/div&gt;
              &lt;div data-dojo-type="dijit.layout.ContentPane" id="content_2" region="bottom"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-dojo-type="dijit.layout.ContentPane" id="foot" region="bottom"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The result, in all browsers except for IE is like that:
  <img src="https://i.stack.imgur.com/N5hY0.jpg" alt="good way"/>
  </p>
  
  <p>But in IE it is shown like that:
  <img src="https://i.stack.imgur.com/DDhtM.jpg" alt="bad way"/>
  </p>
  
  <p>Can anyone explain why there are such differences? At first I thought that in IE content is hidden, so I set <code>overflow: auto</code>, but no scrollbar appeared after page load.</p>