Question

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 can 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;
}

Answer 1

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/