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

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>