title: Full-length menu on left, two content panes on right: DIV-and-CSS-only approach?
body: <p>I'm trying to create a simple web page that resembles the following:</p>
  
  <p><img src="https://i.stack.imgur.com/nFw7g.png" alt="enter image description here"></p>
  
  <p>I've got three DIVs, as follows:</p>
  
  <pre><code>&lt;div class="leftNav"&gt;       
  &lt;/div&gt;
  &lt;div class="topPanel"&gt;          
  &lt;/div&gt;
  &lt;div class="bottomPanel"&gt;           
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>.leftNav
  {
      width: 20%;
      height: 100%;
      float: left;    
  }
  
  .topPanel
  {
      width: 80%;
      height: 50%;
      float: right;
  }
  .bottomPanel
  {
      width: 80%;
      height: 50%;
      float: right;
  }
  </code></pre>
  
  <p>The end result, however, looks completely out-of-whack.  Is it possible to create such a thing with DIVs and CSS?</p>