When I assign a margin in % it reference the width and not the width and the height

A quick question, I have 2 divs with the following code (see below). I want to make a div that occupies 96% of the height and width of the screen (with a minimum size also) and it has a white space of 2% (so that is why I put 2% margin). The problem is that it considers 2% of the width in pixels and takes t开发者_运维技巧hat proportion to the height too (so in my screen I have both 33.6px margin-top, margin-bottom, margin-left. margin-right, and not 2% in proportion with the height and the width).

Do you know how to make it work? I really don't know too much about JavaScript as I am teaching myself and I'm new to this, and I know that this could be done with it so sorry if this is a beginner question. Also, I uploaded it to my webhost so you don't make an .html file if you want to help or if you want to check it out:

http://shoujo.bigchannel.org/stackoverflow.html

Thanks in advance, and thanks for reading my question

            <style>
            #div1
            {
                position:fixed;
                width:100%;
                height:100%;
                min-width:1020px;
                min-height:780px;
                left:0px;
                bottom:0px;
            }
            #div2
            {
                width:96%;
                height:96%;
                margin:2%;
                background-image:url(background.png);
            }
            </style>
            <div id="div1"><div id="div2"></div></div>

it can be easily solved by jQuery

http://jsfiddle.net/2qrGN/ (removed min-width & min-height for this example so that it's visible)

post this into header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ fixLayout() });
$(window).resize(function(){ fixLayout() })

function fixLayout(){
    var targetMargin = $(window).height()*0.02;
  $('#div2').css({marginTop:targetMargin, marginBottom:targetMargin});
}
</script>