Prev: Kerning and ligatures
Next: using Avant Garde font
From: Ryan Chan on 8 Sep 2009 12:34
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.


From: Ben C on 8 Sep 2009 16:12
On 2009-09-08, Ryan Chan <ryanchan404(a)gmail.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.
From: Bert Byfield on 8 Sep 2009 16:51
>> 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" />




From: dorayme on 8 Sep 2009 18:31
In article <slrnhadeh4.3ig.spamspam(a)bowser.marioworld>,
Ben C <spamspam(a)spam.eggs> wrote:

> On 2009-09-08, Ryan Chan <ryanchan404(a)gmail.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
From: Andy Dingley on 9 Sep 2009 05:39
On 8 Sep, 17:34, Ryan Chan <ryanchan...(a)gmail.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.
 |  Next  |  Last
Pages: 1 2 3
Prev: Kerning and ligatures
Next: using Avant Garde font