title: dojo1.7 layout acting screwy
body: <p>I'm trying to make a simple layout work using dojo1.7. Pretty much what I want is:</p>
  
  <ol>
  <li>a header row with a bunch of links and stuff that spans the entire page</li>
  <li>a footer row with a bunch of links and stuff that spans the entire page</li>
  <li>a side panel on the left with a tree in it</li>
  <li>a central panel with some tabs in it</li>
  </ol>
  
  <p>I first made all the widgets and got them all displaying on the same page. Everything was behaving as expected before I started playing with the layout (the relevant code is included at the end of the question)</p>
  
  <p>Firstly, the region settings seem to be largely ignored, the header is where it should be, and the footer is directly under it. behind these are the tree and tabs portions of the layout. both of these are left aligned. Firebug is telling me that there is no region setting for 'tree' ('tree' is the id of the div that has the tree in it).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body class="claro"&gt;
      &lt;div
          id="appLayout" class="demoLayout"
          data-dojo-type="dijit.layout.BorderContainer"
          data-dojo-props="design: 'headline'"&gt;
  
              &lt;div class="centerPanel"
      data-dojo-type="dijit.layout.TabContainer"
      data-dojo-props="region: 'center'"&gt; 
  
                        &lt;div data-dojo-type="dijit.layout.ContentPane" title="blah1" selected="true"&gt;
                          stuff
                        &lt;/div&gt;
                        &lt;div data-dojo-type="dijit.layout.ContentPane" title="blah2"&gt;
                          stuff
                        &lt;/div&gt;            
  &lt;/div&gt;
  
  &lt;div    
          id="tree"
          class="edgePanel"
          data-dojo-type="dijit.layout.ContentPane"
          data-dojo-props="region: 'left', splitter: true"&gt;
  &lt;/div&gt;
  
              &lt;div
                  class="edgePanel"
                  data-dojo-type="dijit.layout.ContentPane"
                  data-dojo-props="region: 'bottom'"&gt;
                  footer stuffs
              &lt;/div&gt; 
  
              &lt;div
                  class="edgePanel"
                  data-dojo-type="dijit.layout.ContentPane"
                  data-dojo-props="region: 'top'"&gt;
                   heading stuffs
  
           &lt;/div&gt;
      &lt;/div&gt;     
  &lt;/body&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
      "dijit/layout/ContentPane", "dojo/parser"]);
  require(["dijit/Tree"], function(Tree) {
  tree = new Tree({ // create a tree
          model: my_model_that_works 
      }, "tree"); // target HTML element's id
  tree.startup();
  });
  </code></pre>
  
  <p>Another weird thing is that i can make the entire contents of the page disappear by changing the 'tree' div to look like:</p>
  
  <pre><code>&lt;div    
          id="tree_container"
          class="edgePanel"
          data-dojo-type="dijit.layout.ContentPane"
          data-dojo-props="region: 'left', splitter: true"&gt;
          &lt;div id="tree"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>