Footer wont stay at bottom and problem with menu height 100%

fri3ndly · March 31, 2008

I have run into an annoying problem while developing my layout for a new website.

I have displayed the html and css sheet coding below.

Basically, the footer will not stay stuck to the bottom, although I do not want it to have a fixed position.

I need it so that whatever content is there it will always be at the bottom of the page and the menu column will always adjust to the size of the page too. You will see what I mean if you just subtract/add content and preview the page.

Help greatly appeciated, thanks

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your21st.co.uk - Ideas for 21st Birthday Celebrations</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div id="wrapper">
       <div id="header">
       	<div id="logo">
             <img src="images/logo.jpg" alt="Your 21st Birthday!" />
       	</div>
         <div id="welcome-bar">
               <p>Welcome to Your21st.co.uk - The website dedicated to giving you a 21st birthay you will never forget! </p>
         </div>
           <div id="advertisement">
           <img src="images/advertisements/ad1.jpg" alt="Advertisement!" />
           </div><div class="clear"></div>
       </div>
       <div id="main-menu">
       	<ul>
           	<li class="tab">Gift Ideas</li>
               <li><a href="#">For Him</a></li>
               <li><a href="#">For Her</a></li>
               <li><a href="#">Gadgets</a></li>
               <li class="tab">Experiences</li>
               <li><a href="#">For Him</a></li>
               <li><a href="#">For Her</a></li>
               <li class="tab">Places To Go</li>
               <li><a href="#">As A Couple</a></li>
               <li><a href="#">With A Group Of Friends</a></li>
               <li><a href="#">With Family</a></li>
               <li class="tab">Website</li>
               <li><a href="#">About Us</a></li>
               <li><a href="#">21st Birthday Experiences</a></li>
               <li><a href="#">FAQ</a></li>
               <li><a href="#">Contact Us</a></li>
           </ul>
       </div>
       <div id="container">
       <p>Content here</p>
  
       <p>ontent here</p>
       <p>Content here</p>
       <p>Content here</p>        <p>Content here</p>
       <p>Content here</p>
       <p>Content here</p>        
       <p>Content h</p>
       <p>Content here</p>
       <p>Content here</p>
       <p>ontent here</p>
       <p>Content here</p>
       <p>Content here</p>
       </div>
       <div class="clear"></div>
	<div id="footer-bar">
               <p>© Copyright 2008| Privacy Policy | Terms & Conditions</p>
         </div>
</div>
</body>
</html>

CSS:

/*******************HTML***********************/
body {margin:0 auto; text-align:center; padding-top:5px; height:100%; background: url(images/bg.jpg) center repeat-y}
p{font-family: "Lucida Sans", Arial, sans-serif; font-size:14px; line-height:20px; color:#000}

/*******************ID's***********************/
#wrapper{width:800px; text-align:left; height:100%; margin:0 auto}
#header{width:800px;}
#welcome-bar{width:800px; height:25px; background:url(images/welcome-bar.jpg) no-repeat;} 
#welcome-bar p{color:#FFFFFF; line-height:20px; font-weight:bold; padding:3px 5px}
#advertisement{height:60px; width:468px; float:right; margin-top:-100px}
#main-menu{background-color:#333; width:188px; padding:1px; min-height:100%; position:absolute}
#container{position:relative;width:612px; float:right; min-height:100%}
#footer-bar{width:800px; height:25px; background:url(images/welcome-bar.jpg) no-repeat; vertical-align:baseline; position:absolute} 
#footer-bar p{color:#FFFFFF; line-height:20px; font-weight:bold; padding:3px 5px; font-size:10px}
/*******************MAIN-MENU***********************/
ul, li{margin:0; padding:0}
li{background-color:#008888; width:188px; height:22px; list-style:none; border-bottom:1px solid #000;
font-family:"Lucida Sans", Arial, sans-serif; font-size:14px}
li a{color:#FFF; text-decoration:none; display:block; padding:3px 4px}
li a:hover{background-color:#00BFBF}
.tab{background-color:#FF3399; text-transform:uppercase; padding:3px 4px; width:180px; color:#fff; font-weight:bold}

/*******************CLASSES***********************/
.clear{
clear:right;
}

gruzaw · March 31, 2008

maybe try putting the footer with position:absolute and top:95% or something. that should keep it at the bottom of the page.

Sign In

Footer wont stay at bottom and problem with menu height 100%

Recommended Posts

fri3ndly

Link to comment

Share on other sites

gruzaw

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information