Stylesheets - question about float

Author

question about float

hantechs@gmail.com

2006-08-26, 6:33 pm

<html>
<body>
text1
text2
</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.

Steven Saunderson

2006-08-26, 6:33 pm

On 26 Aug 2006 05:04:04 -0700, "hantechs@XXXXXXXXXX" <hantechs@XXXXXXXXXX>
wrote:

> <html>
> <body>
> text1
> text2
> </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

Stephen Poley

2006-08-26, 6:33 pm

On 26 Aug 2006 05:04:04 -0700, "hantechs@XXXXXXXXXX" <hantechs@XXXXXXXXXX>
wrote:

><html>
> <body>
> text1
> text2
> </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/

Gus Richter

2006-08-27, 6:37 pm

hantechs@XXXXXXXXXX wrote:
> <html>
> <body>
> text1
> text2
> </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>
text1
text2
<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