require(["dijit/layout/BorderContainer","dijit/layout/ContentPane","dojo/domReady!"],function(BorderContainer,ContentPane){// create a BorderContainer as the top widget in the hierarchyvarbc=newBorderContainer({style:"height: 300px; width: 500px;"});// create a ContentPane as the left pane in the BorderContainervarcp1=newContentPane({region:"left",style:"width: 100px",content:"hello world"});bc.addChild(cp1);// create a ContentPane as the center pane in the BorderContainervarcp2=newContentPane({region:"center",content:"how are you?"});bc.addChild(cp2);// put the top level widget into the document, and then call startup()bc.placeAt(document.body);bc.startup();});

The markup has to look as follows: Note the tabStrip attribute on the TabContainer.

<divdata-dojo-type="dijit/layout/BorderContainer"data-dojo-props="gutters:true, liveSplitters:false"id="borderContainerTwo"><divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'top', splitter:false">
Hi, usually here you would have important information, maybe your company logo, or functions you need to access all the time..
</div><divdata-dojo-type="dijit/layout/AccordionContainer"data-dojo-props="minSize:20, region:'leading', splitter:true"style="width: 300px;"id="leftAccordion"><divdata-dojo-type="dijit/layout/AccordionPane"title="One fancy Pane"></div><divdata-dojo-type="dijit/layout/AccordionPane"title="Another one"></div><divdata-dojo-type="dijit/layout/AccordionPane"title="Even more fancy"selected="true"></div><divdata-dojo-type="dijit/layout/AccordionPane"title="Last, but not least"></div></div><!-- end AccordionContainer --><divdata-dojo-type="dijit/layout/TabContainer"data-dojo-props="region:'center', tabStrip:true"><divdata-dojo-type="dijit/layout/ContentPane"title="My first tab"selected="true">
Lorem ipsum and all around...
</div><divdata-dojo-type="dijit/layout/ContentPane"title="My second tab">
Lorem ipsum and all around - second...
</div><divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="closable:true"title="My last tab">
Lorem ipsum and all around - last...
</div></div><!-- end TabContainer --></div><!-- end BorderContainer -->

You can use a BorderContainer inside your own dijit template with a bit of care to call startup() on your dijit
after it has been added to the DOM, so that its contained BorderContainer can lay itself out.

<divdata-dojo-type="dijit/layout/BorderContainer"data-dojo-props="gutters:true"id="borderContainerThree"><divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'top'"><divdata-dojo-type="dijit/form/Button"id="createButton">Create Inner Dijit
<script type="dojo/on"data-dojo-event="click">require(["dojo/dom","dojo/dom-construct"],function(dom,domConstruct){// Create a new instancevarnewdijit=newMyDijit({},domConstruct.create('div'));newdijit.placeAt(dom.byId('mydijitDestination'));newdijit.startup();});</script></div></div><divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br/>
This is my content.<br/>
There is much like it,<br/>
but this is mine.<br/>
My content is my best friend.<br/>
It is my life.<br/>
I must master it,<br/>
as I must master my life.
</div><divdata-dojo-type="dijit/layout/ContentPane"data-dojo-props="region:'center', splitter:false"><divid="mydijitDestination"style="width: 100%; height: 100%"></div></div></div>

Note: The children of BorderContainer must be created in the source code in their natural tab order.
Header regions should be first and footer regions last.
In Left to right locales, left regions should be before center and right ones.