Empty relative div with a fixed size?

I have a div with position:relative; that is empty, however it is filled with a javascript rendered image. Currently, even though I have set a width and height of 10% and 20% respectively, the div has no height or width unless I actually put some html inside. I would like to avoid putting absolute pixel dimensions though, because of different screen sizes. How c开发者_开发百科an this be solved?

Edit: the div in question

<div id="protovis">
</div>

CSS:

body 
{
  width:100%; height:100%;
  margin:0;
  ...
}

#protovis
{
  margin-left:10%;
  width:80%; height:25%;
  position:relative;
}

To use percentage-based dimensions, the parent element must have dimensions. These dimensions on the parent can also be percentages, but the parent's parent must then have some dimensions.

Check it out here: http://jsfiddle.net/NWWY8/

Perhaps the parent element(s) are set to size to their contents.