Stretching DIV height

Ok well I have a DIV menu bar that I want to stretch 100% in height. It worked perfectly fine until I added the XHTML doctype. So I tried absolute positioning which worked but then my other divs started overlapping them.

So I want to know if there is any javascript code to make my menu bar stretch vertically. The name of the div I want to stretch is the class “sidemenu”.

CSS


    html {
    height: 100%;
     
    }
     
    body {
    min-height: 100%;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    background: #000;
    margin: 0;
    padding: 0;
    color: #CCC;
     
    }
    .container {
    width: 100%;
    background-color: #0c0c0c;
    background-image: url();
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
     
    }
    .content {
    background-color: #222;
    padding: 5px;
    position: relative;
    width: 1000px;
    min-height: 500px;
    margin-left: auto;
    margin-right: auto;
     
    }
    .sidemenu {
    background-color: #111;
    padding: 5px;
    width: 250px;
    height: 100%;
    position: relative;
    float: right;
    margin-right: -5px;
    margin-top: -5px;
     
    }
    .footer {
    padding: 5px;
    height: 210px;
    background-image: url(../Images/footerbackground.gif);
    background-repeat: no-repeat;
    background-color: #0c0c0c;
    position: relative;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
     
    }
    .headerleft {
    background:url(../Images/header-left.png) no-repeat left top;
    height: 209px;
     
    }
    .header {
    background:url(../Images/header-middle.gif) repeat-x left top;
    height: 209px;
    max-width:1920px;
    min-width: 960px;
    background-color: #073444;
     
    }
    .headerright {
    background:url(../Images/header-right.png) no-repeat right top;
    height: 209px;
    z-index: -999;
     
    }
     
    .menu {
    position: absolute;
    margin-top: -35px;
    width: 1024px;
    margin-left: 10px;
     
    }
     
    #content2 {
    min-width: 610px;
    max-width: 940px;
    position: relative;
     
    }

HTML


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Metal Gear Planet</title>
     
    <link rel="stylesheet" type="text/css" href="sheets/style.css"/>
    <link rel="stylesheet" type="text/css" href="sheets/navcss.css"/>
     
    </head>
     
     
    <body>
    <div class="header"><div class="headerleft"><div class="headerright"></div></div></div>
     
    <div class="menu">
    <ul id="nav">
    <li><a href="../index.php">Home</a></li>
    <li><a href="../news/">News</a></li>
    <li><a href="#">Walkthroughs</a>
    <ul>
    <li><a href="../walkthroughs/mgs1/intro.html">Metal Gear Solid 1</a></li>
    <li><a href="../walkthroughs/mgs2/intro.html">Metal Gear Solid 2</a></li>
    <li><a href="../walkthroughs/mgs3/intro.html">Metal Gear Solid 3</a></li>
    <li><a href="../walkthroughs/mgs4/intro.html">Metal Gear Solid 4</a></li>
    </ul>
    </li>
    <li><a href="#">Videos</a>
    <ul>
    <li><a href="../walkthroughs/mgs1/more/video.html">Metal Gear Solid 1</a></li>
    <li><a href="../walkthroughs/mgs2/more/video.html">Metal Gear Solid 2</a></li>
    <li><a href="../walkthroughs/mgs3/more/video.html">Metal Gear Solid 3</a></li>
    <li><a href="../walkthroughs/mgs4/more/video.html">Metal Gear Solid 4</a></li>
    </ul>
    </li>
    <li><a href="#">Hints</a>
    <ul>
    <li><a href="../walkthroughs/mgs1/more/hints.html">Metal Gear Solid 1</a></li>
    <li><a href="../walkthroughs/mgs2/more/hints.html">Metal Gear Solid 2</a></li>
    <li><a href="../walkthroughs/mgs3/more/hints.html">Metal Gear Solid 3</a></li>
    <li><a href="../walkthroughs/mgs4/more/hints.html">Metal Gear Solid 4</a></li>
    </ul>
    </li>
    <li><a href="../downloads/">Downloads</a></li>
    <li><a href="../downloads/">Affiliates</a></li>
    </ul>
    </div>
    <div class="container">
     
    <div class="content">
     
    <div class="sidemenu">
    <p>Content</p>
    </div>
     
    <div id="content2">
    <h1>What the ****!</h1>
    <p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj</p>
    <p>Welcome to the Metal Gear Solid 3 Walkthrough. Note that the choice of difficulty for this Walkthrough is based on Normal which could be the difference in quantity of items, an enemy&#8217;s vision, how much life you have, quantity of enemy&#8217;s in an area, and how much damage you can tolerate.</p>
     
    </div>
    </div>
     
    <div class="footer"><p>Hi</p></div>
     
    </div>
     
    </body>
    </html>

You don’t say under what circumstances you want to do this.
If it’s as soon as it’s rendered, give the div an ID and
place this code anywhere below it:


<script type='text/javascript'>

var menuBar = document.getElementById( 'myDiv' );

menuBar.style.height = menuBar.offsetHeight * 2 + 'px';

</script>

It increased the height, but only a little bit. I just want it to stretch all the way to the bottom of the page.