I have a problem trying to move div's on the page based on the screen size..

I have got my pages (code as per below) displaying the width correctly but can't seem to get the height correct when the user re-sizes the page.

What I am trying to do is..

* have a header that is displayed across the top
* a page on the left which will have a menu in it
* a page to the right that will display the page text
* a footer across the bottom

![sample of what I am tring to do](https://i.stack.imgur.com/NGwN2.png)

My pages looks like this below:

index.htm:

```
<style type="text/css"> 
    body{
    margin:0;
    padding:0px;
    line-height: 1.5em;
    padding-bottom:10px;   /* Height of the footer */
    } 

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }
</style>

    <!-- top -->
    <div id="topsection">
        <div>
            This is the top
        </div>
    </div>

    <!-- Left side -->
    <div ID="left" STYLE="width:260px; left:0px; height:90%; float:left;">
        <iframe src="test.htm" NAME="menu" width="270px" height="100%" frameborder="0"></iframe>
    </div>

    <!-- right side -->
    <div ID="right" STYLE="height:90%; left:0px; float:left;">
        <iframe src="test1.htm" NAME="right" width="100%" height="100%" frameborder="0"></iframe>
    </div>

    <!-- footer -->
    <div ID="foot" STYLE="height:10%; left:0px; top:90%; float:left;">
        <iframe src="foot.htm" NAME="footer" width="100%" height="100%" frameborder="0"></iframe>
    </div>

```

test.htm:

```
<body bgcolor="#808080">

```

test1.htm:

```
<body bgcolor="#88888888">
right side text

```

foot.htm:

```
<body bgcolor="#9999999">
This is a footer

```