float/clear problem

[Florian Brucker]

Hi!

I've got a problem with float & clear. Take this example code:

<div style=" width:100px; height:100px; background-color:#FF0000;
float:left; margin:10px;"></div>
<span style="clear:le ft;">This is some text</span>

In Mozilla 1.6 the span still floats around the image on the left side
(as if there wasn't a "clear" option). When I use

<h1 style="clear:le ft;">This is some text</h1>

instead of the span it works as it should (using the h1 without the
clear-option gives the right result, too, the heading floats around the
image on the left side).

Is this behaviour correct (according to the specification)? If yes, how
can I achieve the desired result (the span acting like there was a <br
clear="all"> infront of it)?
Thanks for any hints,
Florian

[Evertjan.]

Florian Brucker wrote on 07 jun 2004 in
comp.infosystem s.www.authoring.stylesheets:

I've got a problem with float & clear. Take this example code:

<div style=" width:100px; height:100px; background-color:#FF0000;
float:left; margin:10px;"></div>
<span style="clear:le ft;">This is some text</span>

In Mozilla 1.6 the span still floats around the image on the left side
(as if there wasn't a "clear" option). When I use

<h1 style="clear:le ft;">This is some text</h1>

instead of the span it works as it should (using the h1 without the
clear-option gives the right result, too, the heading floats around the
image on the left side).

Is this behaviour correct (according to the specification)? If yes, how
can I achieve the desired result (the span acting like there was a <br
clear="all"> infront of it)?

Floating an INLINE element is unreasonable, You should use a floating
block element.

Clearing a float has the same idea: an inline element cannot get clear of
a block.

so try:

<span style="display: block;clear:lef t;">

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Harlan Messinger]

"Florian Brucker" <to**@torfbold. com> wrote in message
news:2i******** ****@uni-berlin.de...

Hi!

I've got a problem with float & clear. Take this example code:

<div style=" width:100px; height:100px; background-color:#FF0000;
float:left; margin:10px;"></div>
<span style="clear:le ft;">This is some text</span>

In Mozilla 1.6 the span still floats around the image on the left side
(as if there wasn't a "clear" option). When I use

<h1 style="clear:le ft;">This is some text</h1>

instead of the span it works as it should (using the h1 without the
clear-option gives the right result, too, the heading floats around the
image on the left side).

Is this behaviour correct (according to the specification)?
I think so. When you have both blocks and freestanding inlines inside a
block, for formatting purposes the user agent essentially wraps the inlines
in their own anonymous blocks. So your code is treated as:

<div style=" width:100px; height:100px; background-color:#FF0000;
float:left; margin:10px;"></div>
<div><span style="clear:le ft;">This is some text</span></div>

I think the "clear: left;" is acting only within the context of the span's
enclosing anonymous div. Since, in that div, it's not preceded by anything
that floats, it has no effect.
If yes, how
can I achieve the desired result (the span acting like there was a <br
clear="all"> infront of it)?

So the solution is to put the span inside an explicit div, and give the div
the "clear: left; " style.

I would suggest that it's good coding practice in general for a block not to
have both blocks and inlines as immediate children.

[Harlan Messinger]

"Harlan Messinger" <h.*********@co mcast.net> wrote in message
news:2i******** ****@uni-berlin.de...

I think so. When you have both blocks and freestanding inlines inside a
block, for formatting purposes the user agent essentially wraps the inlines in their own anonymous blocks. So your code is treated as:

I forgot to give you the reference:
http://www.w3.org/TR/REC-CSS2/visure...us-block-level

[Florian Brucker]

Okay, thanks you both! This leads right to my next question :)

(Which I will post in another thread as it's something different).

Florian