Left Align Label - Right Align Element (CSS)

Question

I have a form layout that I want to display the aligned label on the left and the alignment of the form to the right. I try to get it to work with float: directly on the form control (in this case a), and then applying the clearfix class to it, but clearfix doesn't seem to work in my select box.

Is something wrong here, or is clearfix not expected to work on the select element?

However, when I do this, the select box still extends to the bottom of the containing div.

My code is:

<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

If the select element is the tallest thing, why not float the label? You can also take the opportunity to make it actually a shortcut instead of some text in a div . Here's the CSS:

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

Here's the 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 is a demo .

Answer 2

As you float the select element, it will no longer affect the height of the containing div. Try adding some addition to the containing element: http://jsfiddle.net/LZVhN/1/ (some relative positioning has also been added for selection)