title: Programmatically Resizing Divs
body: <p>I'm working on an HTML5 browser game that can be divided into 3 parts: two UI panels on the left and right of a center set of square canvases for the playing surface. The three panels need to be horizontally aligned, and the total game needs to keep an aspect ratio of 16:9. The left and right panels should be of equal widths, and all three panels must be of equal height. I have specified a minimum width and height inside a resize() function called when an onresize event is detected.</p>
  
  <p>Currently, each panel is a div, and all three are contained inside a section. Right now, the section isn't necessary, but I want to keep the game separated from extra content at the bottom of the screen that I might choose to add later.</p>
  
  <p>The CSS style is as follows:</p>
  
  <pre><code>* {
      vertical-align: baseline;
      font-weight: inherit;
      font-family: inherit;
      font-style: inherit;
      font-size: 100%;
      border: 0 none;
      outline: 0;
      padding: 0;
      margin: 0;
  }
  
  #gameSection {
      white-space: nowrap;
      overflow-x: hide;
      overflow-y: hide;
  }
  
  
  #leftPanel, #centerPanel, #rightPanel {
      display: inline-block;
  }
  
  #leftPanel {
      background-color: #6495ed;
  }
  
  #centerPanel {
      background-color: #e0ffff;
  }
  
  #rightPanel {
      background-color: #b0c4de;
  </code></pre>
  
  <p>Right now, I have set the background color of each div just to show me when I'm correctly setting the size of each div.</p>
  
  <p>The body of my HTML document is as follows:</p>
  
  <pre><code>&lt;body onresize="resize()"&gt;
      &lt;section id="gameSection"&gt;
          &lt;div id="leftPanel"&gt;Left Panel.&lt;/div&gt;
          &lt;div id="centerPanel"&gt;Center Panel.&lt;/div&gt;
          &lt;div id="rightPanel"&gt;Right Panel.&lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And finally, my resize() function (I created a separate function for resizing the game in case I add more elements below later):</p>
  
  <pre><code>    function resize() {
          var MIN_GAME_WIDTH = 800;
          var MIN_GAME_HEIGHT = 450;
          var GAME_ASPECT_RATIO = 16 / 9;
  
          var width = window.innerWidth;
          var height = window.innerHeight;
  
          var gWidth, gHeight;
  
          if(width &lt; MIN_GAME_WIDTH || height &lt; MIN_GAME_HEIGHT) {
              gWidth = MIN_GAME_WIDTH;
              gHeight = MIN_GAME_HEIGHT;
          }
          else if ((width / height) &gt; GAME_ASPECT_RATIO) {
              &lt;!-- width is too large for height --&gt;
              gHeight = height;
              gWidth = height * GAME_ASPECT_RATIO;
          }
          else {
              &lt;!-- height is too large for width --&gt;
              gWidth = width;
              gHeight = width / GAME_ASPECT_RATIO;
          }
  
          resizeGame(gWidth, gHeight, GAME_ASPECT_RATIO);
      }
  
      function resizeGame(var gWidth, var gHeight, var aspectRatio) {
          var gSection = document.getElementById("gameSection");
          var lPanel = document.getElementById("leftPanel");
          var cPanel = document.getElementById("centerPanel");
          var rPanel = document.getElementById("rightPanel");
  
          gSection.height = gHeight;
          gSection.width = gWidth;
  
          &lt;!-- should the below be taken care of in the CSS? --&gt;
          lPanel.height = gHeight;
          cPanel.height = gHeight;
          rPanel.height = gHeight;
  
          cPanel.width = cPanel.height;
          lPanel.width = (gWidth - cPanel.width) / 2;
          rPanel.width = lPanel.width;
      }
  </code></pre>
  
  <p>I've tried a number of different commands to resize the divs, but it just isn't working for me. When I try adding test canvases, color appears, but the boxes still aren't the correct size. I have also considered loading an invisible background image to each div and scaling it to the desired size; however, I was able to resize my canvas using the above method before and it seemed to work just fine.</p>
  
  <p><strong>Additional Notes</strong><br>
  While I've already had pretty good success resizing a single canvas, I don't want to use just one canvas for the game because not all parts of the UI need to be drawn at the same time.  </p>
  
  <p>I'm trying to keep this solely in Javascript.  </p>
  
  <p>I suspect that I could just use CSS to handle resizing by fixing the aspect ratio to 16:9 and using width:56.25% for the center panel and width:21.875% for the side panels, but that limits me to one aspect ratio and doesn't explain why my above script isn't working.</p>
  
  <p>I can provide the entire HTML file if needed. This is what it's supposed to look like:
  <a href="http://i.imgur.com/U2RG9t0.png" rel="nofollow" title="End Goal">End Goal (without right panel)</a></p>
  
  <p>Thank you!</p>
  
  <p><strong>UDPATE:</strong><br>
  <a href="https://jsfiddle.net/kevhxy9b/" rel="nofollow">jsfiddle</a></p>