Is necessary to show an empty <div>?

Question

I'd like to show a div that has a background-color with the height and width set to 100% but no content. Is it possible to do that without putting a &nbsp; inside?

Edit: Thanks to Mark Biek for pointing out that empty div with width and height styles shows how I'd expect. My div is in a table cell, where it does not show.

<table style="width:100%">
<tr>
<th>Header</th>
<td><div id="foo"></div></td>
</tr>
</table>

Answer 1

I think it depends on the browser (IE/Gecko engine/Webkit engine) and on the mode (Standards mode, Quirks mode). I had some divs appearing in FFox/Standards mode and not appearing in IE6/7.

You probably can do it in a cross browser way with only css, but you'll probably resort to some css hacks.

Answer 2

Hmmm... I'm not sure what exactly the specs say, but I know that while empty inline-elements (e.g. span) are valid, empty block-elements (e.g. p or div) get "cleaned up" by html-tidy.

Thus I'd say it's safer to stick to the &nbsp; as it does no harm in your case. I'd also add a comment like "<!-- background container -->" or something like that. So everyone who's going to change your html knows that the div has a special meaning even though it's empty.

Answer 3

From experience, IE won't render borders of empty elements (at least empty <td> elements)

Answer 4

It can't work. How would you properly define the size of an empty element?

Answer 5

IMHO you should include the nbsp for otherwise empty DIVs if you want them to actually render into something.

On a "theoretical" note .. the browser is not supposed to show anything if there is no content. The entire point of nbsp is to indicate empty space. This is both common sense and (I believe) the standard.

On a practical side .. are you have three choices. One is to leave nbsp off, knowing that you will get unpredictable results. This is likely the easiest to code. Another is to always include nbsp, either by always putting nbsp at the end of the div or testing for empty and adding nbsp if it is empty. The third it to test for the browser and insert nbsp when needed.

Answer 6

perhaps

#foo {empty-cells: show;}

although that may be only for <td>

Answer 7

You should include   at all times.