title: stretching text field with button to fill parent div
body: <p>I have a div <code>&lt;div id="ab"&gt;</code> which contain a text field <code>&lt;input type="text" class="a" /&gt;</code> and a submit button <code>&lt;input type="submit" value="Test" class="b" /&gt;</code>. The div has fixed height and have length 100%. Text field have specific height. Submit button have specific height only. I want Text field to stretch the entire div (in width) leaving space for the submit button to dock. Setting width in percentage is not working;</p>
  
  <p><strong>styling;</strong></p>
  
  <pre><code>#ab{
      background-color: #CCCCCC;
      width: 100%;
      height: 36px;
      border: solid 1px #999999;
  }
  #ab .a{
      display: block;
      float: left;
      border: none;
      height: 34px;
  }
  #ab .b{
      display: block;
      float: left;
      border: none;
      width: 100px;
      height: 36px;
  }
  </code></pre>
  
  <p><strong>html;</strong></p>
  
  <pre><code>&lt;div id="ab"&gt;
    &lt;input type="text" class="a" /&gt;
    &lt;input type="submit" value="Test" class="b" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am getting this;</p>
  
  <p><img src="https://i.stack.imgur.com/sHnJ0.jpg" alt="enter image description here"></p>
  
  <p>and I want this;</p>
  
  <p><img src="https://i.stack.imgur.com/I2L5r.jpg" alt="enter image description here"></p>
  
  <p><strong><a href="http://jsfiddle.net/blasteralfred/7EvQn/" rel="nofollow noreferrer">Here</a></strong> is the fiddle.</p>
  
  <p>How can I do this using css?</p>