title: How to fit these divs inside a div to occupy whole horizontal width
body: <p>How can I fit these 3 child boxes (<code>2 .child, 1 .screen</code>) inside parent (<code>.parentDiv</code>) to perfectly occupy the horizontal space.</p>
  
  <p>I do not want to do this using javascript.
  Fiddle for reference, what I want is <a href="http://jsfiddle.net/ashwyn/s3zUd/" rel="nofollow">here</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="parentDiv"&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div class="child"&gt;&lt;/div&gt;
      &lt;div class="screen"&gt;&lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>The .screen element can be before after or a middle element.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#parentDiv {width:600px; height:400px; margin:10px auto; border:1px solid #000}
  
  .child {width:100px; border:1px solid blue; float:left; height:100%}
  .screen {float:left; border:1px solid red; height:100%;}
  
  .child, .screen {
      box-sizing:border-box;
      -moz-box-sizing:border-box; /* Firefox */
      -webkit-box-sizing:border-box; /* Safari */
  }
  ​
  </code></pre>