title: Page layout two divs side by side: right scrollable only, left expandable to fit content
body: <p>I am trying to build this layout </p>
  
  <p><a href="https://i.stack.imgur.com/Y1FCp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y1FCp.png" alt="enter image description here"></a></p>
  
  <p>I want :</p>
  
  <ul>
  <li>Two main divs side by side inside a wrapper div</li>
  <li>The wrapper should expand to 100% browser size</li>
  <li>the left div (banner) is fixed and overlayed, it will be like a vertical navigation container. However when the list of items exceeds what you can see in the browser without scrolling, the div expands its height</li>
  <li>The right div (content) has overflow:auto so that if its content exceeds its allowed height (browser height) you can scroll down to see the rest (all while left div is fixed).</li>
  </ul>
  
  <p>I have been trying for a while for the best solution, this is what I came up with so far:</p>
  
  <pre><code>&lt;style&gt;
      html, body {
              height: auto;
          }
          #wrapper {
              overflow: hidden;
              height: 100%;
  
          }
          div#banner {
              width: 35%;
              float: left;
              padding-bottom: 1000px;
              margin-bottom: -1000px;
              overflow:hidden;
              height:100%;
              background: rgba(0, 0, 0, 0.74);
              z-index: 999;
  
  
          }
          div#content {
              width: 65%;
              float: left;
              background-color: grey;
              padding-bottom: 1000px;
              margin-bottom: -1000px;
              overflow:auto;
              background: blue;
              height:100%;
              color:white;
          }
  &lt;/style&gt;
  &lt;div id="wrapper"&gt;
      &lt;div id="banner"&gt;
        &lt;header&gt;
              header content
          &lt;/header&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text2&lt;br&gt;
      &lt;/div&gt;
      &lt;div id="content" style=""&gt;
          right
          text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;text&lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(<b>update</b>) <a href="https://jsfiddle.net/nze5ug5t/5/" rel="nofollow noreferrer">https://jsfiddle.net/nze5ug5t/5/</a></p>
  
  <p>How can I achieve this layout?</p>