Layout with BorderContainer

HTML

<div id="WidgetGallary">
    <div class="WidgetCaption">
        Widget Gallary
    </div>
    <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">
             <div id="Widget1" class="dojoDndItem Widget" dndtype="Widget">
                Widget 1
            </div>    
            <div id="Widget2" class="dojoDndItem Widget" dndtype="Widget">
                Widget 2
            </div>   
            <div id="Widget3" class="dojoDndItem Widget" dndtype="Widget">
                Widget 3
            </div>            
            <div id="Widget4" class="dojoDndItem Widget" dndtype="Widget">
                Widget 4
            </div>
    </div>
</div>
<div dojoType="dijit.layout.BorderContainer" design="headline" id="DashboardContainer">
    <div dojoType="dijit.layout.ContentPane" data-dojo-props="splitter:true" id="DashboardTop" region="top">
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">

        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane"  data-dojo-props="splitter:true" id="DashboardLeft" region="left">
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">

        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane"  data-dojo-props="splitter:true" region="center" id="DashboardCenter" >
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">

        </div>
    </div>
    <div dojoType="dijit.layout.ContentPane"  data-dojo-props="splitter:true" region="bottom" id="DashboardBottom" >
        <div class="WidgetSource" data-dojo-type="dojo.dnd.Source" accept="Widget">

        </div>
    </div>
</div>

CSS

html,body{ width: 100%; height: 100%; margin:0px;padding:0px; overflow: hidden;}
#WidgetGallary {
    width: 20%;
    height: 100%;
    float: left;
}
.WidgetCaption{
    padding: 5px;
    background-color: lightgray;
   border: 1px solid gray;
    color: black;
}
#DashboardContainer {
    width: 80%;
    height: 100%;
    float: left;
}
#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"]);