Как правильно плавать элементы и сохранять tabindex?

Вот скрипка: http://jsfiddle.net/5s7vv/

То, что я хочу сделать, состоит в том, что 2 кнопки плавают влево и 2 справа, как и в примере, но button_4 должен быть самым правым элементом. Тем не менее, я не могу этого добиться просто простым плавающим правом. Я должен изменить их порядок в разметке, но это нарушает пользовательский интерфейс (табуляция между кнопками в неправильном порядке), что фактически приводит к моему вопросу.

Можно ли поместить обе кнопки вправо, в правильном порядке и по-прежнему сохранить индекс вкладок и, конечно, без дополнительной разметки. (обертывание их в div легко, но я действительно хочу этого избежать).

Я знаю свойство tabindex, но насколько я знаю, его не очень поддерживают...

Код HTML:

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

Ответ 1

добавить это:

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

это делает их (3 и 4) местами "подкачки"

или position: relative, вероятно, тоже будет работать

Обновление: использование отношения местоположения в IE более стабильно.

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

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

Ответ 2

Это немного взломать, но вы можете обернуть кнопки 3 и 4 в div и повернуть плавающий div. Это сохранит порядок кнопок.