Basics of floating elements in CSS

i understand that float takes an element as left or as right as it can from the current flow. i understand that the element follow the floated element is wraping it like a p after img. first-do all following elements wrap the float untill there is no more room? (so if i have p that only takes half the floated picture, will the a and h3 and then another p will keep wraping untill there is no more space? or just the first element?) i also understand that a clear will stop the wraping of the clear element and any following elements, right? will any element inline or block will wrap the float? then why wont another div will?

i dont understand why when floating a div/img the p after it will wrap it yet if you have 2 divs, when the first is floated lets say to the left, the div after will be on a new line. if ill float it for the left also i understand it will stack next to the former float, yet why will it be on the same line as the first one if i float it to the right? i thought float is using the normal flow, and in the normal flow a div after the first float will be under it. so why 1 float left div and another float after will look like that:

------
------

yet if ill float the second to the right it will be that:

------                     ----------

and not that:

-------
                                                          -------------

is the float doing something to the flow?

---

guys im sorry, i开发者_开发问答 didnt make myself clear. im not trying to do anything, just understand the behavior of floats generally.

lets say i have:

<div style="float:left"></div>
<div></div>

then the first will float for the left, yet for some reason the second div(lets say i did give the first one width less then 100%) will be on a new line. why a new line and not like p-wrap around and next to the first? we dont give p a float yet it wraps floate3d element.

second:

<div style="float:left"></div>
<div style="float:right"></div>

both divs(again given proper width) will be on the same line. i want to know why the first code will make them show on different lines yet the second on the same line. shouldnt float move the box as much to the side from its current flow? isnt the current flow of the second div(second code) will be where it is on the first code(one line below) so why using 2 opposite floats will make the divs show on the same line: ------------ ----------------- instead of the one floating right be where it is now, just a line below the first div?

---

I read that 3 times and gave up...

Are you trying to float one element left and another right?

Simply give them a width:

<div style="float: left; width: 400px;">1</div>
<div style="float: right; width: 400px;">2</div>

p.s. A picture speaks a thousand words..

[edit] if you want it inside a container:

<div id="container" style="position: absolute; width: 800px; margin: 0 auto; overflow: hidden;">
    <div style="float: left; width: 400px;">1</div>
    <div style="float: right; width: 400px;">2</div>
</div>

---

Sounds like you need to order your HTML tags to the order of floats.

Right floats should come first.

---

Looks like your parent element to your floating elements isn't set to 100% width. Make sure you're using position:relative and setting your widths correctly.

Also, please show your code. It's very hard to decipher your text.

---

<div style="float: left;">first line</div>
<div style="float: right;">second line</div>