How to float elements right and still keep tabindex?

Question

Here is a fiddle: http://jsfiddle.net/5s7vv/

What I want to do is have 2 buttons floated left and 2 right, just like the example, but button_4 should be the rightmost element. However, I cannot achieve that by just a simple float right. I should change their order in the markup, but that breaks user experience (tabbing between buttons is in wrong order), which actually leads to my question.

Is it possible to float both buttons right, in the correct order and still keep their tab index, and of course without extra markup. (wrapping them in div is easy, but I really want to avoid that).

I know the tabindex property, but as far as I know its not well supported...

---

HTML Code:

CSS:

#container{
    width: 200px;    
}

#container a{
    width: 20px;
    height: 20px;
}

.button_1, .button_2{
     float: left;   
}

.button_3, .button_4{
     float: right;  
}

.button_1{background-color: blue;}
.button_2{background-color: red;}
.button_3{background-color: green;}
.button_4{background-color: yellow;}

Answer 1

add this:

.button_3 {margin-right: 20px;}
.button_4 {margin-right: -40px;}

this makes them (3 & 4} "swap" places

or position: relative would probably work too

Update: using position relative seems to be more stable in IE..

.button_3, .button_4{
    float: right; 
    position: relative; 
}

.button_3 {left: -20px;}
.button_4 {left: 20px;}