title: Position 2 blocks side by side filling the view port with one block set to width:Auto
body: <p>Lots of discussion here on this topic, but still can't get what I want. I have 2 div blocks that I want to put side by side. </p>
  
  <p>The left most side contains a tree menu and a background color. I have the width set to auto and want the background color to fill the view port vertically regardless of how many nodes are in the tree menu.</p>
  
  <p>I want the contents of the right block to be next to the left block with a 2px margin and have an auto Height and Width that fills the remaing space and gets scroll bars for any overflow.</p>
  
  <p>The only way I have found to get the left block to fill the view port vertically is setting postion:absolute and top: 0px, bottom: 0px. But when I do that I cannot figure out how to position the right block such that it fills the remaining space as the left box expands and contracts in width as the tree expands and collapses. </p>
  
  <p>Is there a way to set the width of the right box based on the current width of the left box?</p>
  
  <p>Basically I have 2 Divs with the following css for those divs...</p>
  
  <pre><code>.treeMenu {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: auto;
      margin-right:2px;
      padding: 10px;
      background: rgba(218, 235, 245, 6); 
  }
  
  
  .viewer {
      position: relative;
      float:right;
  
      width: 100%;   
           //100% fills the view port width which is not what I want
           //a fixed width is not what I want either as it will not adjust to the size of the tree menu.
           //if I could set the width or left margin based on the position of the left block's right side I think I could get it to work.
  
      height: 100%; 
      border: solid;
  
  
    }
  </code></pre>
  
  <p>*<strong><em>Thanks to Wesley for the solution to my question</em>*</strong>
  Working code...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="treeMenu" &gt;
          &amp;nbsp;
      &lt;/div&gt;
      &lt;div class="viewer"&gt;
          &amp;nbsp;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>body {
      width: 100%;
      margin: 0 auto;
      font: 100% Arial, Arial, Helvetica, sans-serif;
  }
  
  .wrapper {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  
  .treeMenu {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width: auto;
      margin-right:20px;
      padding: 10px;
      background: rgba(218, 235, 245, 6);
  }
  
  .viewer {
      position: relative;
      float:right;
      height: 100%; 
      border: solid;
      overflow-x:scroll;
      overflow-y:scroll;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $("div.viewer").append("&lt;img id='theImg' src='Images/FM-000-T01 TITLE INDEX QMC 1824 (1).jpg'/&gt;");
      $('div.viewer').width(($(document).width() - $('div.treeMenu').width())-28);
  });
  
  $(window).resize(function() {
         $('div.viewer').width(($(document).width() - $('div.treeMenu').width())-28);
  }).resize();
  </code></pre>