CSS - Aligning Right with Floats

Question

I'm still pretty green at CSS, having the following CSS / HTML:

<input type="reset" value="Clear" style="float: right;" />
<input type="submit" value="Send" style="float: right;" />

Produces the following results:

Instead of the desired output:

Changing the order of the HTML elements seems to fix the issue but is also counter-intuitive.

What is the general solution to this kind of problems?

Answer 1

Put them in a container div and float that right?

Answer 2

<div style="float:right;">
  <input type="reset" value="Clear" />
  <input type="submit" value="Send" />
</div>

Answer 3

they are floated right in the order they are encountered, the first item is floated to the furthest right then the next item is floated right after it.

try this instead:

<div style="float: right;">
<input type="reset" value="Clear" style="float: left;" /> 
<input type="submit" value="Send" style="float: left;" /> 
</div>

Answer 4

As far as I know when dealing with floats the order in which the elements appear in the document (or more precisely in which they are parsed) is important. The first element gets layouted first and then the next and then ...

Answer 5

The "float" parameter sends the item to the right as far as it can, until it hits another floated element. Hence, the first button (Clear) moves to the right until it hits the margin of the box containing it. The second button tries to do the same, but is stopped by the clear button already there, so stops just to the left of it.

That may be counter-intuitive since items do end up reversed if you float them to the right, but if you float them to the left, they end up in the same order as when you floated them. Hence, instead of thinking left-to-right with how float will line up based on order in the code, you have to think outside-to-inside.