title: CSS - Two Divs Side by Side, One takes up as much room as need, other fills rest of width
body: <p>I'm trying to get two Divs to sit side by side. I want one div to take up as much width as is needed and the other to to take up the remaining width so both divs span 100% width. Is this possible? I've tried floating and a bunch of different positioning settings but I can't find a solution that works. I naturally thought that adding a float: left to the left most element would work, however when you try to add padding/margin/border to the right element the browser wont apply it. Here is some code that I've extended (from an existing answer) to illustrate the problem.</p>
  
  <pre><code>&lt;style&gt;
      #foo {
          float: left;
          background: red;
          height: 100%;
          padding: 5px;
      }
      #bar {
          background: green;
          border: solid 1px blue;
          padding: 5px;
          height: 100%;
      }
  &lt;/style&gt;   
  &lt;div&gt;
      &lt;div id="foo"&gt;foo&lt;/div&gt;
      &lt;div id="bar"&gt;bar&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you open this code up in a browser you'll notice that the bar div isn't padded, and the border isn't applied to it... I have no idea why.</p>
  
  <p>Thanks for any help.</p>