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" />

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

Recommended Answers

All 9 Replies

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>


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:

<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?

<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

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 {
.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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.