www.biggerhockey.com I am hosting my new project, Mission Environment, on this domain. I am trying to get the left menu to stretch all the way to the footer, but I cant get it to budge. Help would be greatly appreciated. <!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> Code (markup): /* 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 (markup):
No the question was not answered. You gave me an alternative solution, but I do not believe that there is no way to actually stretch the menu to the bottom. I started a new thread in the CSS section to get more specific help.
I'm pretty sure you can't set a div to a stretch to specific height. Why don't you just take the black border off the bottom of the left nav and use a background image in your container to make it look like the nav is stretched? If it's set to the container, you know it will always stretch to the bottom
Here's the background image. but...I just noticed you have 35px top and bottom margins set to "container" so don't set the background image of that div. create new div inside of container, set margins and padding to 0 and use this as the background image.
I just decided to make the bg image thing myself and go with that solution. Thanks guys. Humanedited, not exactly sure what you are talking about. I did it with the bg image to container and seems to work fine... please elaborate.