Left Align Label - Right Align Select Element (CSS)

Question

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 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>

If you want the select box to be outside the box with the border, then you have to place the select tag outside of the "category-select" div. — Michaeldcooney, Dec 07 '11 at 22:57

score 6 · Accepted Answer · answered Dec 08 '11 at 00:37

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 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.

Thanks that's a very elegant solution and it's helped with with another problem I was having in IE7. Cheers! — Barbs, Dec 21 '11 at 03:48

score 0 · Answer 2 · answered Dec 07 '11 at 22:54

0

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: http://jsfiddle.net/LZVhN/1/ (also added some relative positioning to the select)

answered Dec 07 '11 at 22:54

ptriek

9,040
5
31
29

Of course you're right. I was thinking adding padding would simply shift the select box around as well. Thanks for the help. – Barbs Dec 08 '11 at 05:15

Left Align Label - Right Align Select Element (CSS)

2 Answers2