title: 2 Dojo Dijit Content Panes Side by Side - When Showing/Hiding one, the other will not resize dynamically
body: <p>I have 2 Dojo Dijit ContentPane's side by side. I want to show/hide one of them, and have the other one stretch dynamically as needed. I am using an ESRI mapping example which uses 'dijit.layout.BorderContainer'. The "divRightMenu" will show/hide itself correctly, but, when opened, rather than pushing the "mapDiv" Div, it just appears on top of it. I want the "mapDiv" div to dynamically resize itself depending on the visible state of the "divRightMenu" div. </p>
  
  <p>I'm including the full page code below - I have already experimented with style.Display = Block / None, style.Visibility = Visible/Hidden, as well as trying to dynamically set the width of divRightMenu from 1 pixel to 150 pixels. In all cases, divRightMenu appears "on top of" mapDiv, rather than "pushing" it like I want. If I change the code so that divRightMenu is visible by default on page load, then what happens when i hide it is it disappears, but the blank spot it once occupied still remains. Surely this is something simple I'm missing?</p>
  
  <p>In the past (standard CSS), I would combine "float:left/right" with "overflow:hidden", and display:block/none, and could easily achieve the effect I'm after, but with Dojo/Dijit i'm not sure what i'm missing. I experimented with various combinations of float/overflow on the inline styling of the 2 DIV tags in question, but was unable to get it to work. I also noted that one poster mentioned that he programmatically created his dijit ContentPanes on the fly to overcome the issue, but I was hoping for a solution other than this (i need all the settings from the div's content to be retained between showing/hiding the div, and i'm not sure if re-creating it on the fly will allow for this). </p>
  
  <p>Here are the 2 threads I found that touch on the topic:
  <br>
  <a href="https://stackoverflow.com/questions/7274282/dojo-toggle-hide-and-show-divs">Dojo Toggle Hide and Show Divs</a>
  <br>
  <a href="https://stackoverflow.com/questions/4088839/toggling-the-display-of-a-dojo-dijit">Toggling the display of a Dojo dijit</a></p>
  
  <p>These mainly deal with being able to hide the div or not. In my case I'm able to hide/show it, but just not able to get the desired auto-resize behavior from the remaining DIV.</p>
  
  <p>In any case, full code sample is included below - any help would be appreciated:</p>
  
  <p><b>Main Index.htm Code:</b></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="layout.css"&gt;
  &lt;link rel="stylesheet" type="text/css"href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.2/js/dojo/dijit/themes/tundra/tundra.css"&gt;
  &lt;script type="text/javascript"&gt;
  var djConfig = {
  parseOnLoad: true
  }
  
  function ToggleVisibility(id) 
  {
  //if (dijit.byId(id).domNode.style.width == '150px') {
  if (dijit.byId(id).domNode.style.display == 'block') {
  dijit.byId(id).domNode.style.display = 'none';
  //dijit.byId(id).domNode.style.width = "1px";
  //dojo.style(id, "visibility", "hidden");
  }
  else {
  //dijit.byId(id).domNode.style.width = "150px";
  dijit.byId(id).domNode.style.display = 'block';
  //dojo.style(id, "visibility", "visible");
  }
  
  dijit.byId(id).resize();
  //dijit.byId("mapDiv").resize();
  }
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.2"&gt;&lt;/script&gt;
  &lt;script src="layout.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="tundra"&gt;
  &lt;!--TOPMOST LAYOUT CONTAINER--&gt;
  &lt;div style="border:4px solid purple;width:100%;height:100%;" id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"&gt;
  &lt;!--HEADER SECTION--&gt;
  &lt;div id="header" style="border:4px solid red;height:85px;" dojotype="dijit.layout.ContentPane" region="top"&gt;
  &lt;div id="headerArea" style="border:2px solid black;height:50px;" dojotype="dijit.layout.ContentPane" region="top"&gt;Logo Here&lt;/div&gt;
  &lt;div id="navMenuArea" style="border:2px solid green;height:35px;" dojotype="dijit.layout.ContentPane" region="top"&gt;Menu Here | &lt;input type="button" onClick="ToggleVisibility('divRightMenu');" value="Toggle Right Menu"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--CENTER SECTION--&gt;
  &lt;!--CENTER CONTAINER--&gt;
  &lt;div id="mapDiv" style="border:2px solid green;margin:2px;" dojotype="dijit.layout.ContentPane" region="center"&gt;&lt;/div&gt;
  &lt;!--RIGHT CONTAINER--&gt;
  &lt;div id="divRightMenu" style="display:none;width:150px;border:2px solid orange;background-color:whitesmoke;" dojotype="dijit.layout.ContentPane" region="right"&gt;
  Right Menu
  &lt;/div&gt;
  
  &lt;!--FOOTER SECTION--&gt;
  &lt;div style="border:4px solid blue;height:50px;" id="footer" dojotype="dijit.layout.ContentPane" region="bottom"&gt;
  Footer Here
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><b>layout.js Code:</b></p>
  
  <pre><code>dojo.require("esri.map");
  var resizeTimer;
  var map;
  function init() {
  var initialExtent = new esri.geometry.Extent(-125.0244140625, 14.4580078125, -80.0244140625, 59.4580078125, new esri.SpatialReference({
  wkid: 4326
  }));
  map = new esri.Map("mapDiv", {
  extent: initialExtent
  });
  
  dojo.connect(map, 'onLoad', function(theMap) {
  dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
  resizeMap();
  });
  });
  
  var url = "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";
  
  var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
  map.addLayer(tiledLayer);
  }
  
  //Handle resize of browser
  function resizeMap() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
  map.resize();
  map.reposition();
  }, 800);
  }
  
  //show map on load 
  dojo.addOnLoad(init);
  </code></pre>
  
  <p><b>layout.css Code:</b></p>
  
  <pre><code>html, body {
  height: 100%;
  width: 100%;
  margin: 0; 
  padding: 0;
  }
  
  body {
  background-color:#FFF;
  overflow:hidden;    
  font-family: "Trebuchet MS";
  }
  
  #header {
  background-color:#FFF;
  color:#999;
  font-size:16pt;
  font-weight:bold;
  }
  
  #headerArea {
  text-align:left;
  }
  
  #navMenuArea {
  text-align:right;
  /*background:url(toolbar_bg.png) repeat #6788a2;*/
  }
  
  #topmenu {
  background-color:#FFF;
  color:#999;
  font-size:16pt;
  text-align:right;
  font-weight:bold;       
  }
  
  #footer {
  background-color:#FFF;
  color:#999;
  font-size:10pt;
  text-align:center;
  }
  </code></pre>