Correct way to clear after float

Hello,

Conside simple HTML/CSS code...

<style type="text/css">

..left{
display:inline;
float:left
}

..right {
display:inline;
float:right;
}

..clear {
clear:both;
}

</style>

<div class="left"> left </div>
<div class="right"> right </div>

after two floated DIV, which of the following one is correct?

1. <div class="clear"></div>
2. <div class="clear">&nbsp;</div>
3. <div class="clear"><!-- --></div>
4. <br class="clear" />

I see different sites are using different way, any suggestions?


Thanks.

Gazing into my crystal ball I observed Ryan Chan <ryanchan404 (AT) gmail (DOT) com>
writing in news:32c72ce5-8c26-4b96-96ed-474f2afc4aa1
@m7g2000prd.googlegroups.com:

Hello,

Conside simple HTML/CSS code...

style type="text/css"

.left{
display:inline;
float:left
}

.right {
display:inline;
float:right;
}

.clear {
clear:both;
}

/style

div class="left"> left </div
div class="right"> right </div

after two floated DIV, which of the following one is correct?

1. <div class="clear"></div
2. <div class="clear">&nbsp;</div
3. <div class="clear"><!-- --></div
4. <br class="clear" /

I see different sites are using different way, any suggestions?


Thanks.

I don't do that unless I have to. Usually, I do something like:

<div id="left"></div><div id="right"></div>
<div id="footer"></div>

where footer already has clear:both in an external stylesheet, or in a
style element.



--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

On 2009-09-08, Ryan Chan <ryanchan404 (AT) gmail (DOT) com> wrote:

Hello,

Conside simple HTML/CSS code...

style type="text/css"

.left{
display:inline;
float:left
}

.right {
display:inline;
float:right;
}

.clear {
clear:both;
}

/style

div class="left"> left </div
div class="right"> right </div

after two floated DIV, which of the following one is correct?

1. <div class="clear"></div

2. <div class="clear">&nbsp;</div
3. <div class="clear"><!-- --></div
4. <br class="clear" /

4 is correct only in XHTML-- it would just be <br class="clear"> in
HTML.

And, really, it should be <br clear="all"> because the CSS clear
property technically doesn't apply to inline elements (but all modern
browsers just turn the HTML attribute clear into the CSS property clear
and make an exception for it).

There should be no reason for the &nbsp; or <!-- --> nonsense but I
expect it's because of some IE bug.

I see different sites are using different way, any suggestions?

They will all work. Or just put clear on the next block-level thing
down.

after two floated DIV, which of the following one is correct?
1. <div class="clear"></div
2. <div class="clear">&nbsp;</div
3. <div class="clear"><!-- --></div
4. <br class="clear" /

I use:

CSS:

..clearall {
clear: both;
}

and HTML:

<div class="clearall"></div>

because IE7 was choking on my
<br class="clear" />

In article <slrnhadeh4.3ig.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2009-09-08, Ryan Chan <ryanchan404 (AT) gmail (DOT) com> wrote:

3. <div class="clear"><!-- --></div


There should be no reason for the &nbsp; or <!-- --> nonsense but I
expect it's because of some IE bug.

I'd be surprised if even IE saw <div class="clear"><!-- --></div> as

different to <div class="clear"></div>. But only to the extent of an
almost imperceptible eyebrow raise.

--
dorayme

On 8 Sep, 17:34, Ryan Chan <ryanchan... (AT) gmail (DOT) com> wrote:

Hello,

Conside simple HTML/CSS code...

style type="text/css"

.left{
* * display:inline;
* * float:left

}

.right {
* * display:inline;
* * float:right;

}

.clear {
* * clear:both;

}

/style

div class="left"> left </div
div class="right"> right </div

after two floated DIV, which of the following one is correct?

1. <div class="clear"></div
2. <div class="clear">&nbsp;</div
3. <div class="clear"><!-- --></div
4. <br class="clear" /

I see different sites are using different way, any suggestions?

Personally I use <hr class="clear" > with some CSS on it to set the
clear and also to switch off the usual default rule. My personal bias
to do this with an empty element rather than a no-content <div>
(although there's nothing "wrong" with that). There also used to be
an issue with Tidy in that it could remove empty <div> elements in
some cases.

You shouldn't use <br>, as that's an inline element rather than block,
so it would be a validation error to place that as a direct child of
<body> under HTML 4.01 Strict.

On 8 sep, 12:34, Ryan Chan <ryanchan... (AT) gmail (DOT) com> wrote:

Hello,

Conside simple HTML/CSS code...

style type="text/css"

.left{
* * display:inline;
* * float:left

}

.right {
* * display:inline;
* * float:right;

}

.clear {
* * clear:both;

}

/style

div class="left"> left </div
div class="right"> right </div

after two floated DIV, which of the following one is correct?

1. <div class="clear"></div
2. <div class="clear">&nbsp;</div
3. <div class="clear"><!-- --></div
4. <br class="clear" /

Ryan,

I would simply use the next [sibling] block element in the document
order and set it to clear: both.
Setting clear to an empty element may not be semantically correct. To
clear an element, you shouldn't have to create and insert an empty
element (it increases the DOM tree for no reason). So, #1 and #2 are
definitely not recommendable, not best practice.

The CSS 2.1 ( http://www.w3.org/TR/CSS21/visuren.html#propdef-float )
gives an interactive example of how to use clear (left) with
screenshot of expected results (before and after clearing left). You
can view it in this demo:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/Float2p-with-clear-left..html

And what Andy Dingley wrote you is correct: a <br> would not be valid
under strict DTD.

regards, Gérard
--
Internet Explorer 8 bugs: 56 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Internet Explorer 7 bugs: 182 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

On 8 sep, 18:31, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

I'd be surprised if even IE saw <div class="clear"><!-- --></div> as
different to <div class="clear"></div>.

IE 7, at least, considers, treats SGML comment differently. It does
really treat
<div class="clear"><!-- --></div>
as different to
<div class="clear"></div>

Adjacent sibling selector and comment bug in Internet Explorer 7 and
Internet Explorer 8 beta 1.
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug165
and
http://web.archive.org/web/20080210175201/http://www.unics.uni-hannover.de/nhtcapri/ie7-bugs
from Andreas Prilop

but there are also another bunch of cases where IE 6, IE 7 and even IE
8 treats SGML comments differently.

regards, Gérard
--
Internet Explorer 8 bugs: 56 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE8Bugs/
Internet Explorer 7 bugs: 182 bugs so far
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

In article
<9135732a-db63-4880-9a88-1ea0bbe57933 (AT) a7g2000yqo (DOT) googlegroups.com>,
GTalbot <newsgroup (AT) gtalbot (DOT) org> wrote:

Setting clear to an empty element may not be semantically correct. To
clear an element, you shouldn't have to create and insert an empty
element (it increases the DOM tree for no reason). So, #1 and #2 are
definitely not recommendable, not best practice.

Sometimes there is no relevant following element and the point of the
clearing is to make a container "see" its floats and grow height for
them. IE6 at least does not notice overflow: hidden to do this trick and
so sometimes a clearing element is needed in this situation. But
otherwise I agree with Adrienne and you on this, best to use the
following element for the clearing style.

--
dorayme

In article
<3776f0ab-f378-4563-af4f-9fcc01f23509 (AT) 38g2000yqr (DOT) googlegroups.com>,
GTalbot <newsgroup (AT) gtalbot (DOT) org> wrote:

On 8 sep, 18:31, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:


I'd be surprised if even IE saw <div class="clear"><!-- --></div> as
different to <div class="clear"></div>.


IE 7, at least, considers, treats SGML comment differently. It does
really treat
div class="clear"><!-- --></div
as different to
div class="clear"></div

Adjacent sibling selector and comment bug in Internet Explorer 7 and
Internet Explorer 8 beta 1.
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug165
and
http://web.archive.org/web/20080210175201/http://www.unics.uni-hannover.de/nht
capri/ie7-bugs
from Andreas Prilop

but there are also another bunch of cases where IE 6, IE 7 and even IE
8 treats SGML comments differently.

You snipped my: "But only to the extent of an almost imperceptible
eyebrow raise." I duly raise one of my eyebrows. <g>

--
dorayme