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 inside?
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 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.
This seems to work in Firefox, Safari, IE6, & IE7.
<html>
<head>
<style>
#foo{
background: #ff0000;
width: 100%;
height: 100%;
border: 2px dashed black;
}
</style>
</head>
<body onload="">
<div id="foo"></div>
</body>
</html>
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.
perhaps
#foo {empty-cells: show;}
although that may be only for <td>
You should include
at all times.
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.