title: Split Background Color HTML
body: <p>So, I understand that this is the code for splitting the background in two colors:</p>
  
  <pre><code>#top,
  #bottom {
      position: fixed;
      left: 0;
      right: 0;
      height: 50%;
  }
  
  #top {
      top: 0;
      background-color: orange;
  }
  
  #bottom {
      bottom: 0;
      background-color: green;
  }
  </code></pre>
  
  <p>The source of this can be visualized here: <a href="http://dabblet.com/gist/2870276" rel="nofollow">http://dabblet.com/gist/2870276</a>. </p>
  
  <p>On my website, rather than 50% and 50%, I have 30% and 70%. How do I make it so that when the browser is adjusted to shrink horizontally, the top 30% doesn't stay at 30% but at the height of the original?</p>