By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,114 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

float/clear problem

P: n/a
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:left;">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:left;">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
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Florian Brucker wrote on 07 jun 2004 in
comp.infosystems.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:left;">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:left;">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:left;">

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #2

P: n/a

"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:left;">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:left;">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:left;">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.

Jul 20 '05 #3

P: n/a

"Harlan Messinger" <h.*********@comcast.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

Jul 20 '05 #4

P: n/a
Okay, thanks you both! This leads right to my next question :)

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

Florian
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.