title: CSS - Aligning Right with Floats
body: <p>I'm still pretty green at CSS, having the following CSS / HTML:</p>
  
  <pre><code>&lt;input type="reset" value="Clear" style="float: right;" /&gt;
  &lt;input type="submit" value="Send" style="float: right;" /&gt;
  </code></pre>
  
  <p>Produces the following results:</p>
  
  <p><a href="https://i.stack.imgur.com/rOD0Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rOD0Q.png" alt="alt text"></a>
  </p>
  
  <p>Instead of the desired output:</p>
  
  <p><a href="https://i.stack.imgur.com/u2AEl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u2AEl.png" alt="alt text"></a>
  </p>
  
  <p>Changing the order of the HTML elements seems to fix the issue but is also counter-intuitive.</p>
  
  <p>What is the general solution to this kind of problems?</p>