title: How to float elements right and still keep tabindex?
body: <p>Here is a fiddle: <a href="http://jsfiddle.net/5s7vv/" rel="noreferrer">http://jsfiddle.net/5s7vv/</a></p>
  
  <p>What I want to do is have 2 buttons floated left and 2 right, just like the example, but <strong>button_4</strong> 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.</p>
  
  <p>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).</p>
  
  <p>I know the tabindex property, but as far as I know its not well supported...</p>
  
  <hr>
  
  <p><strong>HTML Code:</strong></p>
  
  
      
      
      
      
  
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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;}
  </code></pre>