www.biggerhockey.com
I am trying to stretch my left menu to the bottom to the footer, yet I cannot get this to work.
Code:
/* CSS Document */
body {
background-color: #FFFFFF;
font-family: verdana, arial, sans-serif;
font-size: 11px;
font-weight: normal;
color: #888888;
text-decoration: none;
}
#container {
margin: 35px auto;
width: 780px;
border-style: solid;
border-color: #000000;
border-width: 1px;
}
#topmenu {
width: auto;
text-align: center;
background: #E8E8E8;
}
#topmenu a:hover{
color: #BBCDD9;
font-weight: bold;
text-decoration : none;
}
#topmenu a:link, .topmenu a:visited {
color: #BBCDD9;
font-weight: bold;
text-decoration : none;
}
#leftmenu {
width: 199px;
height: 100%;
background: #E8E8E8;
float: left;
border-style: solid;
border-color: #000000;
border-right-width: 1px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}
#leftmenu a:hover{
color: #BBCDD9;
font-weight: bold;
text-decoration : none;
}
#leftmenu a:link, .topmenu a:visited {
color: #BBCDD9;
font-weight: bold;
text-decoration : none;
}
#leftlinks {
background: #E8E8E8;
padding: 2px 2px 2px 10px;
}
#leftcategories {
background: #FFFFFF;
padding: 3px 3px 3px 5px;
font-size: 12px;
}
#main {
width: 580px;
float: right;
}
#content {
margin: 0px 13px 0px 20px;
width: 520px;
padding: 5px 0px 0px 0px;
}
#highlight {
border-color: #000000;
border-width: 2px;
border-style: solid;
background: #E8E8E8;
padding: 0px 3px 0px 3px;
margin: 0px 0px 0px 0px;
}
#banner {
padding: 5px 5px 0px 5px;
text-align: center;
}
#footer {
width: auto;
background: #E8E8E8;
text-align: center;
clear: both;
text-align: left;
padding: 2px 10px 2px 10px;
}
h1 {
font-family: verdana, arial, sans-serif;
font-size: 13px;
font-weight: bold;
color: #C3C3C3;
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
border-bottom: 1px dotted #CCCCCC;
}
h2 {
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
margin: 0 0 5px 0;
padding: 10px 0px 0px 0px;
text-align: left;
}
h3 {
font-family: verdana, arial, sans-serif;
font-size: 13px;
font-weight: bold;
color: #666666;
margin: 0px 0px 15px 0px;
padding: 10px 0px 5px 0px;
border-bottom: 1px solid #CCCCCC;
}
#rss {
border-bottom: 1px dotted #cccccc;
border-left: 1px dotted #cccccc;
border-right: 1px dotted #cccccc;
border-top: 0;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-bottom: 5px;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Mission Environment</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="container">
<div id="topmenu">links here</div>
<div><img src="images/top.gif"></div>
<div id="leftmenu">
<div id="leftcategories">Main Menu</div>
<div id="leftlinks"><a href="">Test Link</a><br />
<a href="">Home</a><br />
<a href="">Current News</a><br />
<a href="">How to Take Action</a><br />
<a href="">Why to Take Action</a><br />
<a href="">Advertising</a><br />
<a href="">Contact Us</a><br /></div>
<div id="leftcategories">Sponsors</div>
<div id="leftlinks">spoonsor<br />
sponsor<br />
sponsor<br />
sponsor<br /></div>
</div>
<div id="main">
<div id="banner"><a href=""><img src="images/blankbanner.gif" border="0"></a></div>
<div id="content">
<h1>Welcome to Mission Environment!</h1>
<p>Mission Environment is looking to make the future a better place. Our goal is to show the general population how urgent the threat is from global warming and provide everyone quick and easy ways to take action.</p>
<div id="highlight"><h2><a href="">How to Take Action Now</a></h2>
<p>Worried about global warming but don't know what to do? Check out our growing list of quick and easy things you can do to make a difference!</p></div>
<h1>Current News</h1>
<div id="rss">
<?php include("news.php"); ?>
</div>
</div>
</div>
<div id="footer">| © Mission Environment 2007 |</div>
</div>
</body>
</html>