Left Align Label - Right Align Select Element (CSS)

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.

Is there something wrong here or is clearfix not expected to work on a select element?

When I do this however, the select box still extends outside the bottom of the containing div.

My Code:

<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> <div> Category: <select 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> 

2 Answers

If the select element is the tallest thing, why not float the label? You can also take the opportunity to make it actually a label instead of just 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> <div> <label for="category">Category:</label> <select 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.

Since you're floating the select element, it won't affect the height of the containing div anymore. Try adding some padding to the containing element: (also added some relative positioning to the select)