css the float right option changed the selector - css

Question

I make a simple selector like this:
when I make the float:right, I got this:
please see the red circle to know what is the problem.
css
/* The CSS */
select {
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:right;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;
}
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
#media screen and (-webkit-min-device-pixel-ratio:0) {
select {padding-right:18px}
}
label {position:relative}
label:after {
content:'<>';
font:11px "Consolas", monospace;
color:#aaa;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
right:8px; top:2px;
padding:0 0 2px;
border-bottom:1px solid #ddd;
position:absolute;
pointer-events:none;
}
label:before {
content:'';
right:6px; top:0px;
width:20px; height:20px;
background:#f8f8f8;
position:absolute;
pointer-events:none;
display:block;
}
the float:right that I changed, and that is making the problem, exist in the select in the css

Answer 1

Its a little tricky to identify without more HTML/CSS but it seems to be because the selection box and the element circled in red are two seperate elements and you've only floated one.
What you may want to do is wrap both in a div and apply float:right to this. This will mean that everything within the div is floated (both the selection box and the element encircled)