Untitled

<!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 type="text/javascript">
            require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
            "dijit/layout/ContentPane"], function() {
                var appLayout = new dijit.layout.BorderContainer({"design": "headline"}, 'appLayout');

                var centerPanel = new dijit.layout.ContentPane({"region": "center"}, "centerPanel")
                var topPanel = new dijit.layout.ContentPane({"region": "top"}, "topPanel")
                var leftPanel = new dijit.layout.ContentPane({"region":"left"}, "leftPanel")

                appLayout.addChild(centerPanel)
                appLayout.addChild(topPanel)
                appLayout.addChild(leftPanel)
                appLayout.startup();

                });
        </script>
    </head>
    <body class="claro">
        <div id="appLayout" class="demoLayout">
            <div id="centerPanel" class="centerPanel">
                <h4>Group 1 Content</h4>
            </div>
            <div id="topPanel" class="edgePanel">Header content (top)</div>
            <div id="leftPanel" class="edgePanel">Sidebar content (left)</div>
        </div>
    </body>
</html>