Left Align Label - Right Align Select Element (CSS)
25,102
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>
Author by
Barbs
Updated on July 16, 2022Comments
-
Barbs almost 2 years
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>
-
Barbs over 12 yearsOf course you're right. I was thinking adding padding would simply shift the select box around as well. Thanks for the help.
-
Barbs over 12 yearsThanks that's a very elegant solution and it's helped with with another problem I was having in IE7. Cheers!