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 shit!</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’s vision, how much life you have, quantity of enemy’s in an area, and how much damage you can tolerate.</p>
</div>
</div>
<div class="footer"><p>Hi</p></div>
</div>
</body>
</html>