469,631 Members | 1,152 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,631 developers. It's quick & easy.

question about float

<html>
<body>
<p style="width:30%;">text1</p>
<p style="float:left;">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 positioned on the right of text1? 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. 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.

Aug 26 '06 #1
3 1462
On 26 Aug 2006 05:04:04 -0700, "ha******@gmail.com" <ha******@gmail.com>
wrote:
<html>
<body>
<p style="width:30%;">text1</p>
<p style="float:left;">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 positioned on the right of text1? 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. 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.
Try putting the float:left paragraph before the other. I think the
browser has to know about all the float stuff before it encounters the
other stuff.

--
Steven
Aug 26 '06 #2
On 26 Aug 2006 05:04:04 -0700, "ha******@gmail.com" <ha******@gmail.com>
wrote:
><html>
<body>
<p style="width:30%;">text1</p>
<p style="float:left;">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 positioned on the right of text1? 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. 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.
This is one of the things that isn't very easy to get from the CSS spec.
However if you look at
http://www.w3.org/TR/REC-CSS2/visuren.html#flow-control
you'll see that elements only get adjusted next to a floating box if the
floating box resulted from an element *earlier* in the document. So to
get the effect you want, put the floated paragraph first.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Aug 26 '06 #3
ha******@gmail.com wrote:
<html>
<body>
<p style="width:30%;">text1</p>
<p style="float:left;">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:left;border:1px solid blue;margin-top:0;">text2</p>
<div style="border:1px dotted green;">
This is where you should add lengthy text material to create several
lines in order to witness the (shrink)wrapping 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
Aug 27 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by lixiaoyao | last post: by
3 posts views Thread by Ken H | last post: by
6 posts views Thread by Martin Bootsma | last post: by
4 posts views Thread by JoeC | last post: by
12 posts views Thread by kostas | last post: by
reply views Thread by Timothy Grant | last post: by
2 posts views Thread by Bruce !C!+ | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.