title: Left Align Label - Right Align Select Element (CSS)
body: <p>I have a form layout that I want to display the label aligned left and the form control aligned right.  I have been trying to get it to work using a float:right on the form control (in this case a ) and then applying the clearfix class to it but the clearfix does not appear to be working on my select box.</p>
  
  <p>Is there something wrong here or is clearfix not expected to work on a select element?</p>
  
  <p>When I do this however, the select box still extends outside the bottom of the containing div.</p>
  
  <p>My Code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #category-select {
  left: 0px;
  top: 0px;
  width: 350px;
  border: 1px solid #666;
  }
  select#category {
  float: right;
  }
  select.clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  &lt;/style&gt;&lt;!-- main stylesheet ends, CC with new stylesheet below... --&gt;
  &lt;!--[if IE]&gt;
  &lt;style type="text/css"&gt;
    select.clearfix {
      zoom: 1;  
    }  
  &lt;/style&gt;
  &lt;![endif]--&gt;
  
  &lt;div id="triage"&gt;
      &lt;div id="category-select"&gt;
            Category: 
            &lt;select class="ipad-dropdown clearfix" id="category" name="category"&gt;
                  &lt;option value="A"&gt;A - Emergency
                  &lt;option value="B"&gt;B - Urgent
                  &lt;option value="C"&gt;C - ASAP
                  &lt;option value="D" selected&gt;D - Standard
            &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>