ha******@gmail. com wrote:
<html>
<body>
<p style="width:30 %;">text1</p>
<p style="float:le ft;">text2</p>
</body>
</html>
The effect of this html code is : text1 and text2 each is on a line.
My question is: Why text2 is *not* positioned on the right of text1?
Because this is a matter of top-to-bottom "flow" of element content.
1. The 1st P element by default is set flush left and this block element
per convention provides a double new line.
2. The next element, which happens to be the 2nd P element, also by
default is also set flush left at that point, below the 1st P element.
The "float:left " itself also causes the flush left action and in
this test case is not necessary, but superfluous. It would have been
useful for the next element if there were one, but in this example there
isn't one.
Because
the CSS2.1 said: A floating element must be placed as high as possible;
A left-floating element must be put as far to the left as possible; A
higher position is preferred to one that is further to the right or
left.
The above is talking about positioning the float within the "float box".
The float box encompasses the area from the top-left of the floated item
to the bottom-right of the subsequent element (which wan't in your
original sample) to the floated item.
Run this modified version to see what I mean and play with it to get a
full understanding. The "float box" is the green dotted area which also
includes the blue floated element.
<html>
<body>
<p style="width:30 %;border:1px solid red;">text1</p>
<p style="float:le ft;border:1px solid blue;margin-top:0;">text2</p>
<div style="border:1 px dotted green;">
This is where you should add lengthy text material to create several
lines in order to witness the (shrink)wrappin g of the text around the
floated element.
</div>
If text2 was positioned on the right of text1, I cannot see any
conflict with the rules for floated element.
Seems a silly question. Can somebody give me hints? Thanks.
Hopefully I have cleared up your understanding of floated elements and
you see it differently now.
The other respondents point out how to code to achieve what you had
wrongly expected. The "float box" does it.
Point of clarification re. the margin-top:0;
The 1st P element provides double line leading down to the "float box".
The 2nd P element has a margin-top default value from the top of the
"float box" and the margin-top:0 eliminates that.
The text within the DIV has no element wrapper, so has no default
margin-top value from the top of the "float box".
--
Gus
