Well hey there.
I've been trying to redo the layout of my website by having the page stretch across the whole screen instead of something like 960px. I've also made it so that my height stretches to 100%. Along with my main content div, I'm trying to get my sidebar and footer to cooperate with me which is becoming complete utter horse****.
I'm finding this really impossible to do right, especially after adding the XHTML doctype. I did have the divs position as relative, but after adding the doctype it just ignored the 100% height so I had to change it to absolute which has created many more problems, but it would at least allow the divs stretch vertically.
My current problem now is that the footer won't go underneath the content and sidebar properly. I want it to be below everything but it has a huge gap. I really am feeling like I'm far off from what I should be doing.
Main 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;
overflow-x: hidden;
}
.content {
background-color: #222;
padding: 5px;
position: relative;
width: 100%;
height: 100%;
float: left;
position: absolute;
}
.sidemenu {
background-color: #111;
padding: 5px;
width: 250px;
height: 100%;
position: absolute;
margin-top: -5px;
margin-left: 80%;
}
.footer {
margin-left: -5px;
margin-bottom: 0;
margin-top: 100%;
padding: 5px;
height: 210px;
background-image: url();
background-color: #111;
}
.headerleft {
background:url() no-repeat left top;
height: 209px;
}
.header {
background:url() repeat-x left top;
height: 209px;
max-width:1920px;
min-width: 960px;
background-color: #073444;
}
.headerright {
background:url() no-repeat right top;
height: 209px;
z-index: -999;
}
.menu {
position: absolute;
margin-top: -35px;
width: 1024px;
margin-left: 10px;
}
#content2 {
width: 80%;
float: left;
}Main Content
<!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=""/>
</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="content">
<div class="sidemenu">
<p>Hello there</p><img src="" />
</div>
<div id="content2">
<h1>What the fuck</h1>
<p>JHlasdklj asdjlksafjskld sfjl;asd asdjl; asdjkalsd asjdl;smdas sadljas dadjl asdkj</p>
</div>
<div class="footer"><p>Hi</p></div>
</div>
</body>
</html>