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


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

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

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.a...ttprequest_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.

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

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.

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 ;-)

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:
And not closing the div tag.

While within another implementation of the same template, used elsewhere, I see the technique applied below:
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?

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

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.


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

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.

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.