Right align 3 div's to the right of the page

I'm trying to right align 3 div boxes in the order signin_box - signin_btn - signin_opt. My current code is swapping signin_opt with signin_box. I know I can just swap the placement in the HTML code but I want to learn how to float the correct way.

.container {
    border-top: solid #27A7DF 3px;
    background-color: #000;
    height: 43px;
    width: 100%
}
.signin_box {
    height: 42px;
    width: 275px;
    float: right;
    back开发者_如何学JAVAground-color: #323232
}
.signin_btn {
    height: 42px;
    width: 72px;
    float: right;
    background-color: #000
}
.signin_opt {
    height: 42px;
    width: 135px;
    float: right;
    background-color: #323232
}

<div class="container">
    <div class="signin_box"></div>
    <div class="signin_btn"></div>
    <div class="signin_opt"></div>
</div>

---

When using float the order matters. Try using like so:

<div class="container"> 
    <div class="signin_opt"></div> 
    <div class="signin_btn"></div> 
    <div class="signin_box"></div> 
</div> 

---

When you float siblings to the right, the elements first specified in the HTML are pushed farthest right. To keep the elements in the order specified by the HTML, you need to float the container to the right and its children to the left.

---

You probably need to add the clear: right; CSS attribute.

Fiddle: jsFiddle demo

Example:

.signin_box {
    height: 42px;
    width: 275px;
    float: right;
    background-color: yellow;
    clear: right;
}