CODEWITHSUNDEEP
htmlcssalignmentcss-float
Alix Axel
Alix Axel

Reputation: 154513

CSS - Aligning Right with Floats

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:

alt text

Instead of the desired output:

alt text

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?

Upvotes: 2

Views: 14665

Answers (5)

MidnightLightning
MidnightLightning

Reputation: 6928

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.

Upvotes: 1

AxelEckenberger
AxelEckenberger

Reputation: 16926

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 ...

Upvotes: 1

Mauro
Mauro

Reputation: 4511

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>

Upvotes: 6

Pentium10
Pentium10

Reputation: 207828

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

Upvotes: 2

easement
easement

Reputation: 6139

Put them in a container div and float that right?

Upvotes: 3

Related Questions