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

https://stackoverflow.com/a/4224500/470749 was helpful for me (wrap your elements in a containing element and float that to the right instead). — Ryan, Jan 06 '21 at 22:11

score 14 · Answer 1 · answered May 30 '11 at 07:57

14

It's a bit of a hack, but you could wrap buttons 3 and 4 in a div and right-float the div. That would keep the button order intact.

answered May 30 '11 at 07:57

Kalessin

2,282
2
22
24

I would do that if there is no better option – NoBBy May 30 '11 at 08:21
2

This is the cleanest and most practical solution. The accepted answer only works when you know the width of the elements. – Joe Maffei Jun 30 '16 at 18:23

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

6

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 30 '11 at 08:09

clairesuzy

27,296
8
54
52

How to float elements right and still keep tabindex?

2 Answers2

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