What about the Float property?

[MatthewHSE]

Up until recently, I only used up to two "floated" elements "on the same level" as one another. For instance:

<style type="text/css">
div.1 {float: left;}
div.2 {float: right;}
div.3 {float: right;}
</style>

<div class="1">&nbsp;</div>
<div class="2">&nbsp;</div>

But then I added a third div, like this:

<div class="1">&nbsp;</div>
<div class="2">&nbsp;</div>
<div class="3">&nbsp;</div>

I thought div 3 would be floated all the way to the right, with div 2 going between divs 1 and 3. Instead, to achieve that effect, I had to put div 3 in the middle of the code. Only then would it display at the right on the page.

What's the deal with floating page elements? How should it best be used?

[photon]

It's the order of the floats, as you found out. With your code, div #1 floats off to the left side as you'd expect. The next div, #2, then floats off the right. The #3 div then floats right as far as it can until it bumps up again #2.

That's if #3 can fit between #1 and #2. If not, #3 will float to the right side underneath #2.

Unless #2 is really long and #1 is really short then #3 floats beneath #1 against #2. It gets hard to explain without a picture.

[DrDoc]

So, why not just use this:

<style type="text/css">
div.1 {float: left;}
div.2 {float: left;}
div.3 {float: right;}
</style>

or this:

<style type="text/css">
div.1 {float: left;}
div.2 {float: right;}
div.3 {float: right;}
</style>

<div class="1">&nbsp;</div>
<div class="2">&nbsp;
<div class="3">&nbsp;</div>
</div>