title: Floating form elements
body: <p>Essentially I'm trying to float, most of the list item elements horizontally with with the input underneath the label. Here is a template of what I'm trying to achieve.</p>
  
  <p><img src="https://i.stack.imgur.com/hJZca.png" alt="enter image description here"></p>
  
  <p>I've included some of the code here:</p>
  
  <pre><code>&lt;div&gt;
   &lt;label for="headline"&gt;Headline: &lt;/label&gt;
   &lt;input type="text" name="headline" value="Milestone" maxlength="50"size="55"&gt;
  &lt;br&gt;
  
  &lt;div class="dates clearfix"&gt;
   &lt;label for="effect_date"&gt;Date of Effect:&lt;/label&gt;
   &lt;input type="text" name="effect_date"&gt;
  
   &lt;label for="end_date"&gt;End Date (opt):&lt;/label&gt;
   &lt;input type="text" name="end_date"&gt;
  
   &lt;label&gt;Date Visible:&lt;/label&gt;
  
   &lt;input type="radio" name="is_date_visible" value="2012"&gt;
  
   &lt;label for="is_date_visible_yes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="is_date_visible"&gt;
   &lt;label for="is_date_visible_no"&gt;No&lt;/label&gt;
   &lt;br&gt;
  
   &lt;label&gt;Administrative:&lt;/label&gt;
   &lt;input type="radio" name="is_adminis" value="1"&gt;
   &lt;label for="is_admin_yes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="is_adminis"&gt;
   &lt;label for="is_admin_no"&gt;No&lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>    .clearfix:before, .clearfix:after { content: ""; display: table; }
      .clearfix:after { clear: both; }
      .clearfix { *zoom: 1; }
  
      div.dates {
  
      }
      .dates label {
           display: block;
           color: #2c93d5;
           font-size: 15px;
           margin-bottom: 5px;
      }
      .dates input {
           display: block;
      }
      ​.dates label, .dates input {
           float: left;
  
      }
  </code></pre>
  
  <p>I've tried various things with the CSS all to no avail. Essentially I can't get the inputs to drop below the labels and I can't line them all up they usually come out staggered from the top.</p>
  
  <p>I also have a fiddle link I've been working on: </p>
  
  <p><a href="http://jsfiddle.net/vjDEq/" rel="nofollow noreferrer">http://jsfiddle.net/vjDEq/</a></p>
  
  <p>Thanks for any help.</p>