XHTML empty DIV tags

[sagedavis]

Hey all,
I have a div tag in which is a basic place holder, calling CSS to clear some floats of previous div tags. They are currently being used like

<div id="clear"></div>

Does my code validate better, or is it better practice to use

<div id="clear" />

instead?
Will any browsers have trouble if I do it the second way?
Thanks
Sage

[CertGuard]

I'm not sure what would happen in your case, but you can try it here and see what it does

http://www.w3schools.com/xml/tryit.asp?filename=try_xmlhttprequest_js1

I suggest leaving it as you originally have it, it's not doing any harm that way and it is sure to work with all browsers.

[cmills83]

You could always just add clear:both to the next div under the floats and that will clear them as well.

[MidiMagic]

The second way does not validate. The div tag is not self-closing. A tag is defined as being either a tag pair, or self-closing. It can't be both.

Many browsers totally ignore a pair of tags with no contents.

[vishwebdesign]

Do not use id to identify the div you're using to clear the floats, because you might be using it several times in your document and your mark-up won't be validated. In fact, you do not even need to use the div to clear them. Use a <span class="clr"></span>

<style>
.clr
{
clear:both;
display:block;
line-height:1px;
font-size:1px;
}
</style>

and that should do the work. I thought of doing it myself, but i'm not getting time to update my website, still using divs to clear float ;-)

[igmuska]

Now I am completely confused about the empty div tag. I do know that the div creates a line break before and after its rendering but have read where a <br /> element is styled inline with clear:both.

I've seen recommendations to clear floats, using the empty div tag:

<div style="clear:both" />

And not closing the div tag.

While within another implementation of the same template, used elsewhere, I see the technique applied below:

<div style="clear:both; line-height:1px;"> &nbsp;</div>

Which is correct, although I just read in this topic that the first code example herein will not validate? Or is there an easier way?

[sreein1986]

<div style="clear:both; line-height:1px;"> &nbsp;</div><div style="clear:both; line-height:1px;"> &nbsp;</div>

this one wrong means your styles write in div ID properties and write div tag like this

<div id="clear"></div>

and use in your clear

[rexibit]

You can run into some issues with IE7 making a break in your page if you are not turning off the overflow. This is a common method to clear floated elements.

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
  /* End hide from IE Mac */

Place the class "clearfix" inside the container div that has floated elements. This way, you don't have any breaks in your layout.

<div class="clearfix">
<div class="floatedDiv">
This is a floated div
</div>
</div>

[icorey]

It might depend on the content-type. Application/xhtml+xml would probably render it correctly either way, but IE would not display such a file (at all...it would ask you to open or save it).

If you were using text/html, then it would probably recognize the empty tag as a div tag that's not closed. Or this might just be an IE thing, IDK.

Back to the first tag: not having anything in between the opening and closing tags might also cause some problems.

[MidiMagic]

xhtml does not allow empty tag pairs.

You can put something between the tags (such as an nbsp), and then overwrite it with the script.