float: right - for text

correct way with css

[Blade]

The text on the right hand side of the div box is presented at the bottom of the box instead of at the top as with the left-text - why? Having tried several variations, this unwanted effect is always present.

<div style="border: 1px solid #000000; width: 500px; padding: 5px;">
text-left
<span style="float: right;">
text-right
</span>
</div>

[Blade]

Solution:

<div style="border: 1px solid #000000; width: 500px; padding: 5px;">
<span style="float: left;">text-left</span>
<span style="float: right;">text-right</span>
</div>

I should have looked more closely!

[ronin]

Yep.

The basic rule of thumb with floats is that "You can float something to the left or the right, but you can't float it upwards."

Which means that you have to mark-up your floated text (regardless of whether it's to the left or the right) before you mark up your non-floated text.

People get confused because they see something like:

<div style="float:left;">
<p>This is text, floated left</p>
</div>

<p>This is non-floated text.</p>

And they think that the reason the floated div came first is because it's on the left. But that's not the reason. It's because it's floated.

If the float was on the right, the code would be near identical:

<div style="float:right;">
<p>This is text, floated right</p>
</div>

<p>This is non-floated text.</p>

Otherwise what you'll get is the non-floated text, followed by the right-floated text underneath. (Which is what you saw).

If you want your right float to come second in your code, rather than first, you have to apply a left float to your non-floated text. (As you pointed out).