Layout with BorderContainer

by KenParkerJr

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<div dojoType="dijit.layout.BorderContainer" design="headline" splitters="false" id="DashboardContainer">
    <div dojoType="dijit.layout.ContentPane" id="DashboardTop" region="top">
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
           <div id="Widget1" class="dojoDndItem Widget" dndtype="Widget">
                Widget 1
            </div>
        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane" id="DashboardLeft" region="left">
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
            <div id="Widget2" class="dojoDndItem Widget" dndtype="Widget">
                Widget 2
            </div>
        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane" region="center" id="DashboardCenter" >
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
           <div id="Widget3" class="dojoDndItem Widget" dndtype="Widget">
                Widget 3
            </div>
        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane" region="bottom" id="DashboardBottom" >
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
            <div id="Widget4" class="dojoDndItem Widget" dndtype="Widget">
                Widget 4
            </div>
        </div>
    </div>
</div>

CSS

html,body{ width: 100%; height: 100%; margin:0px;padding:0px; overflow: hidden;}

#DashboardContainer {
    width: 100%;
    height: 100%;
}
#DashboardTop {
    height: 100px;
}
#DashboardLeft {
    width: 300px;
}
#DashboardBottom {
    height: 100px;
}
.Widget{
    width: 100px; 
    height: 100px;   
    color: white;
    margin: 5px;
    float: left;
}
#Widget1{
    background-color: darkblue;
}
#Widget2{
    background-color: darkred;
}
#Widget3{
    background-color: green;
}
#Widget4{
    background-color: purple;
}
.WidgetSource{
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    margin: 0px;
}

JavaScript

require(["dojo/parser", "dojo/dnd/Source", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);