title: Side by side DIV not aligning
body: <p>I'm trying to create a couple DIVs that will sit side by side each taking up half of the width of the div that holds them.  Getting the side-by-side with float: left is working properly, but my elements don't line up properly.  I made a jsfiddle to show you what I mean.
  <a href="http://jsfiddle.net/kzFqU/" rel="nofollow">http://jsfiddle.net/kzFqU/</a></p>
  
  <p>As you can see, it looks alright, but if you make the results square really wide the right alignment of the inputs goes to crap.  </p>
  
  <pre><code>&lt;div class="container-narrow"&gt;
  &lt;div class="form_field"&gt;
      &lt;label&gt;Full Width&lt;/label&gt;
      &lt;input type="text" name="what"&gt;
  &lt;/div&gt;
  &lt;div class="form_field halfwidth"&gt;
      &lt;label&gt;Half Width&lt;/label&gt;
      &lt;input type="text" name="what"&gt;
  &lt;/div&gt;
  &lt;div class="form_field halfwidth"&gt;
      &lt;label&gt;Also Half Width&lt;/label&gt;
      &lt;input type="text" name="what"&gt;
  &lt;/div&gt;
  &lt;div class="form_field"&gt;
      &lt;label&gt;Full Width&lt;/label&gt;
      &lt;input type="text" name="what"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css</p>
  
  <pre><code>body {
  padding-top: 20px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
  background:whitesmoke;
  }
  
  .container-narrow {
      margin: 0 auto;
      background:white;
      border-radius: 10px;
      padding:10px;
  }
  
  .form_field {
      padding: 10px;
  }
  
  .form_field input {
      width:100%;
  }
  
  .form_field label {
      margin-bottom:0px;
  }
  
  .form_field input {
      clear:both;
  }
  
  .halfwidth {
      width: 45%;
      float: left;
  }
  </code></pre>