Header, Horizontal Navigation, 3 Columns and a Footer not working

Note: I used [] code tags but for some reason they just didn't continue keeping in that style.

HTML Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Kolbe Gaming Club</title>
<link rel="stylesheet" type="text/css" href="./includes/main.css" />
</head><body>
<div id="holder">
<div id="header"><img src="./includes/images/header.jpg" alt="header" /></div>
<div id="nav-top">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="container">
<div id="container-left">
<div class="side-left">
<div class="title">Menu</div>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
<div id="container-center">
<div class="content">
<div class="title">News</div>
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here<br />
Text goes here
</div>
</div>
<div id="container-right">
<div class="side-right">
<div class="title">Login</div>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
</div>
<div id="footer-space"></div>
</div>
<div id="footer">footer</div>
</body>
</html>

CSS:

html, body
{
height:100%;
margin:0;
overflow:auto;
}body
{
font-family:"Calibri", "Myriad Pro", Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
background-color:#000000;
}
#holder
{
height:100%;
margin:0 auto -100px auto;
min-height:100%;
position:relative;
width:100%;
}
#header
{
height:253px;
width:100%;
text-align:center;
}
#nav-top
{
padding-bottom:10px;
padding-top:10px;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
height:20px;
width:100%;
text-align:center;
background-image:url(./images/nav-top.png);
}
#nav-top ul
{
list-style:none;
padding:0;
margin:0;
}
#nav-top ul li
{
display:inline;
padding-left:4px;
padding-right:4px;
}
#nav-top ul li a
{
color:#ffffff;
text-decoration:none;
}
#container
{
margin-left:auto;
margin-right:auto;
width:1100px;
}
#container-left
{
width:200px;
float:left;
}
#container-center
{
width:700px;
float:left;
}
#container-right
{
width:200px;
float:left;
}
.side-left
{
width:196px;
border:#ffdb2b 2px solid;
}
.side-left ul
{
list-style:none;
padding:0;
margin:0;
}
.content
{
width:600px;
margin-left:48px;
margin-right:48px;
border:#ffdb2b 2px solid;
}
.side-right
{
width:196px;
border:#ffdb2b 2px solid;
}
.side-right ul
{
list-style:none;
padding:0;
margin:0;
}
.title
{
background-image:url(./images/title.png);
font-size:18px;
color:#003d80;
padding:2px;
padding-bottom:4px;
}
#footer-space
{
height:100px;
clear:both;
}#footer
{
height:100px;
width:100%;
margin-left:0;
margin-bottom:0;
margin-right:0;
background-image:url(./images/footer.png);
position:relative;
}

My Problem is that the footer does not stay at the bottom. I would give you a link to see this, but my server isn't running yet so I thought I would design the site first. I've been stuck on this problem for ages now and help would be greatly appreciated.

Header, Horizontal Navigation, 3 Columns and a Footer not working

woody993

mcs services

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week