JimBlaney/bordercontainer-demo.html

## bordercontainer-demo.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>BorderContainer Demo</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojo/resources/dojo.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9compact/js/esri/css/esri.css">

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

      .fillParent {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .the-top {
        height: 250px;
        background: transparent url('https://pbs.twimg.com/profile_banners/14151391/1398265235/1500x500') fixed no-repeat top left !important;
        color: white;
        line-height: 250px;
        font-weight: bold;
        font-size: 48px;
      }

      .dijitContentPane {
        padding: 0 !important;
      }
    </style>

  </head>
  <body class="claro">

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', 'class': 'fillParent', gutters: false">

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top', 'class': 'the-top'">BorderContainer Demo</div>

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'leading'">Leading</div>

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:
      'center', 'class': 'the-center'"  id="map">
      </div>


    </div>

    <script>
      var dojoConfig = {
        async: true,
        parseOnLoad: false
      };
    </script>

    <script src="http://js.arcgis.com/3.9compact/"></script>

    <script>
      require([
        "dojo/parser",
        "esri/map",
        "dojo/domReady!"
      ], function(parser, Map) {
        parser.parse().then(function() {

          var map = new Map("map", {
            basemap: "streets"
          });

        })
      });
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>BorderContainer Demo</title>

	<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dojo/resources/dojo.css">
	<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
	<link rel="stylesheet" href="http://js.arcgis.com/3.9compact/js/esri/css/esri.css">

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

	.fillParent {
	position: absolute;
	width: 100%;
	height: 100%;
	}

	.the-top {
	height: 250px;
	background: transparent url('https://pbs.twimg.com/profile_banners/14151391/1398265235/1500x500') fixed no-repeat top left !important;
	color: white;
	line-height: 250px;
	font-weight: bold;
	font-size: 48px;
	}

	.dijitContentPane {
	padding: 0 !important;
	}
	</style>

	</head>
	<body class="claro">

	<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline', 'class': 'fillParent', gutters: false">

	<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top', 'class': 'the-top'">BorderContainer Demo</div>

	<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'leading'">Leading</div>

	<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:
	'center', 'class': 'the-center'" id="map">
	</div>



	</div>

	<script>
	var dojoConfig = {
	async: true,
	parseOnLoad: false
	};
	</script>

	<script src="http://js.arcgis.com/3.9compact/"></script>

	<script>
	require([
	"dojo/parser",
	"esri/map",
	"dojo/domReady!"
	], function(parser, Map) {
	parser.parse().then(function() {

	var map = new Map("map", {
	basemap: "streets"
	});

	})
	});
	</script>

	</body>
	</html>