declaratively

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Demo: Layout with Dijit</title>
        <link rel="stylesheet" href="style.css" media="screen" />
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" media="screen" />
        <!-- load dojo and provide config via data attribute -->
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
                data-dojo-config="async: true, parseOnLoad:true">
        </script>
        <script>
            require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
            "dijit/layout/ContentPane", "dojo/parser"]);
        </script>
    </head>
    <body class="claro">
        <div id="appLayout" class="demoLayout"
             data-dojo-type="dijit.layout.BorderContainer"
             data-dojo-props="design: 'headline'">
            <div class="centerPanel"
                 data-dojo-type="dijit.layout.ContentPane"
                 data-dojo-props="region: 'center'">
                <h4>Group 1 Content</h4>
            </div>

            <div class="edgePanel"
                 data-dojo-type="dijit.layout.ContentPane"
                 data-dojo-props="region: 'top'">Header content (top)</div>
            <div class="edgePanel"
                 data-dojo-type="dijit.layout.ContentPane"
                 data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
        </div>
    </body>
</html>