title: Two divs: one fixed, other stretched
body: <p>I am trying to accomplish this:
  <img src="https://i.stack.imgur.com/1iJcU.png" alt="divs-fixed-and-stretched"></p>
  
  <p>But I am having trouble getting the two middle divs to play nice. If I set them both to a relative number (30% and 70%) it "works" but the left div changes size as the user changes the browser-windows width.</p>
  
  <pre><code> #floatitleft{width:30%; float:left;}
   #floatitright{width:70%; float:left;}
  </code></pre>
  
  <p>What I want is, as the picture illustrates</p>
  
  <pre><code> #floatitleft{width:300px; float:left;}
   #floatitright{width:100%; float:left;}
  </code></pre>
  
  <p>But this causes "floatitright" to end up beneath floatitleft. And if I set it to 70% it does end up to the right of "floatitleft" but as I change the browser size a little it ends up underneath yet again. What to do?</p>
  
  <p>UPDATE:
  Eventually I ended up with:</p>
  
  <pre><code>#topper{
      height:100px;
      width:100%;
      background-color:blue;
  }
  #wrapperz{
      height:inherit;
      width:100%;
  }
  #wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
  #wrapperz #floatitleft{
      width:300px;
      float:left;
  }
  #wrapperz #floatitright{
      margin-left: 300px;
      min-width:300px;
  }
  #bottommer{
      height:100px;
      width:100%;
      background-color:red;
  }
  </code></pre>
  
  <p>Which would be used as:</p>
  
  <pre><code>&lt;div id="topper"&gt;
  test
  &lt;/div&gt;
  
  &lt;div id="wrapperz"&gt;
  
  &lt;div id="floatitleft"&gt;
  &lt;p&gt; Stuff &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="floatitright"&gt;
  &lt;p&gt; Stuff &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div style="clear: both;"/&gt;
  
  &lt;/div&gt; &lt;!-- Close Wrapper --&gt;
  
  &lt;div id="bottommer"&gt;
  test
  &lt;/div&gt;
  </code></pre>
  
  <p>Note that this isn't proper HTML but it just serves as the solution to my example. Also,  the "<em>div style="clear: both</em>" is escpecially important if you try this because not using that cuases the footer to mess up as the wrapper doesn't properly stretch vertically. But Mark has provided a what I believe to be better/cleaner alternative below.</p>