title: Set a DIV with fixed position vertically and absolute position horizontally.
body: <p>I'm creating a website consisting of three elements, a header, left div with the content and right div with an image. </p>
  
  <p>I have the left and right div set as percentages of the window, BUT I would like to set a minimum width for the container (and hence both the left and right div) below which a horizontal scroll appears, and the right div scrolls off the right hand of the window. Above the minimum window width, the right div should be fixed to the right of the screen.</p>
  
  <p>Easy enough, BUT I want the right div to be fixed vertically in its position, so that only the left div scrolls. </p>
  
  <p>I'm sure this is really easy for a CSS expert, but it's got me stumped. When I change right div to absolute, it dissapears to the bottom of the screen, when I set it as fixed, it overlaps the left div when the screen width is narrow. </p>
  
  <p>JS Fiddle <a href="https://jsfiddle.net/bfwtL0u7/6/" rel="nofollow noreferrer">here</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="container"&gt;
    &lt;div class="left"&gt;
      &lt;div class="child"&gt;Child&lt;/div&gt;
      &lt;div class="child"&gt;Child&lt;/div&gt;
      &lt;div class="child"&gt;Child&lt;/div&gt;
      &lt;div class="child"&gt;Child&lt;/div&gt; 
      &lt;div class="child"&gt;Child&lt;/div&gt;    
    &lt;/div&gt;
    &lt;div class="right"&gt;
    Right Box
    &lt;/div&gt;  
    &lt;div class="header"&gt;
    Header
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
    background-color: #BC1417;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    min-width:600px;
  }
  .right {
    width: 50%;
    height: 400px;
    position: fixed;
    bottom: 0px;
    right: 0px;
    background-color: #3ED623;
    min-width: 300px;
  }
  .left {
    width: 45%;
    height: 1700px;
    position: absolute;
    top: 200px;
    left: 0px;
    margin-left: 5%;
    margin-bottom: 80px;
    background-color: #120C98;
    min-width: 270px;
  }
  .header {
    width: 100%;
    height: 100px;
    position: fixed;
    background-color: #B210C8
  }
  .child {
    width: 90%;
    height: 300px;
    left: 5%;
    background-color: #F8FF00;
    border: 2px solid #62495D;
    position: relative;
    margin-top: 30px;
  }
  </code></pre>