I am new to the API and get stuck on something that seems very straightforward. I have three content panes in a bordercontainer. I use the region attribute to specify their locations on the page, but the specs seem to be ignored by the browser (tried on FireFox so far). No matter what locations I specified the browser always place the three content panes from top to bottom in the order the <div> elements appear in the HTML document. Any suggestions? Here is my HTML doc. Thanks a lot.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ancient Theaters in Italy</title>
<link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css">
<style>
#titlePane {
width: auto;
height: 50px
}
#timesliderPane {
width: 60px;
height: 50px;
padding: 5px
}
</style>
<script type="text/javascript" data-dojo-config="parseOnLoad: true; isDeBug: true"
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane")
dojo.require("dijit.layout.BorderContainer")
dojo.require("dijit.layout.AccordionContainer")
dojo.require("esri.map");
dojo.addOnLoad(init);
var map;
function init(){
map = new esri.Map("mapPane");
var basemapURL = "https://arcgis.its.carleton.edu/ArcGIS/rest/services/ItalyTheaters/MapServer"
var basemap = new esri.layers.ArcGISDynamicMapServiceLayer(basemapURL);
map.addLayer(basemap);
}
</script>
</head>
<body class="claro">
<div id="pageContainer" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'">
<!-- TOP TITLE PANE-->
<div id="titlePane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
<h1 align="center">Ancient Theaters in Italy</h1>
</div>
<!--CENTER MAP PANE-->
<div id="mapPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:900px; height:600px">
</div>
<!--BOTTOM TIME SLIDER PANE-->
<div id="timesliderPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
Time slider here
</div>
</div>
</body>
</html>
In BorderContainer layout, top, center, bottom only honor height style not width; left and right panel only honor width style. See Attachment