Etiqueta de alineación izquierda - Seleccionar elemento de alineación a la derecha (CSS)

Question

Tengo un diseño de formulario que quiero mostrar la etiqueta alineada a la izquierda y el control de formulario alineado a la derecha. He estado tratando de hacer que funcione usando un flotador: justo en el control de formulario (en este caso a) y luego aplicando la clase clearfix pero el clearfix no parece estar funcionando en mi cuadro de selección.

¿Hay algo mal aquí o no se espera que clearfix funcione en un elemento seleccionado?

Cuando hago esto, sin embargo, el cuadro de selección aún se extiende fuera de la parte inferior del div que contiene.

Mi Código:

<style type="text/css"> 
#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; 
} 
</style><!-- main stylesheet ends, CC with new stylesheet below... --> 
<!--[if IE]> 
<style type="text/css"> 
    select.clearfix { 
    zoom: 1; 
    } 
</style> 
<![endif]--> 

<div id="triage"> 
    <div id="category-select"> 
      Category: 
      <select class="ipad-dropdown clearfix" id="category" name="category"> 
       <option value="A">A - Emergency 
       <option value="B">B - Urgent 
       <option value="C">C - ASAP 
       <option value="D" selected>D - Standard 
      </select> 
    </div> 
</div> 

Answer 1

Si el elemento select es lo más alto, ¿por qué no flotar la etiqueta? También puede aprovechar la oportunidad para que sea realmente una etiqueta en lugar de solo un texto en un div. Aquí está la CSS:

#category-select { 
    left: 0px; 
    top: 0px; 
    width: 350px; 
    border: 1px solid #666; 
    text-align: right; 
} 
#category-select label { 
    float: left; 
    margin: 1px; 
} 

Aquí está el código HTML:

<div id="triage"> 
    <div id="category-select"> 
     <label for="category">Category:</label> 
     <select class="ipad-dropdown clearfix" id="category" name="category"> 
      <option value="A">A - Emergency</option> 
      <option value="B">B - Urgent</option> 
      <option value="C">C - ASAP</option> 
      <option value="D" selected>D - Standard</option> 
     </select> 
    </div> 
</div> 

Here's the demo.

Answer 2

Puesto que usted está flotando el elemento de selección, que no afectará a la altura de la div que contiene más. Intente agregar algo de relleno al elemento que lo contiene: http://jsfiddle.net/LZVhN/1/ (también se agregó una posición relativa a la selección)