dojo1.7 layout acting screwy

http://stackoverflow.com/questions/11248427/dojo1-7-layout-acting-screwy

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<div id="appLayout" class="demoLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">

  <div class="centerPanel" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center'">

    <div data-dojo-type="dijit.layout.ContentPane" title="blah1" selected="true">
      stuff
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" title="blah2">
      stuff
    </div>
  </div>

  <div id="tree" class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left', splitter: false">
  </div>

  <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">
    footer stuffs
  </div>

  <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
    heading stuffs

  </div>
</div>

CSS

html,
body,
#appLayout {
  height: 100%;
  width: 100%;
}

JavaScript

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
  "dijit/layout/ContentPane"
]);

require(["dijit/Tree", "dojo/domReady!"], function(Tree) {
  /*
    tree = new Tree({ // create a tree
      //model: my_model_that_works 
    }, "tree"); // target HTML element's id
    tree.startup();
  */
});