fri3ndly Posted March 31, 2008 Share Posted 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; } Link to comment https://forums.phpfreaks.com/topic/98796-footer-wont-stay-at-bottom-and-problem-with-menu-height-100/ Share on other sites More sharing options...
gruzaw Posted March 31, 2008 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/98796-footer-wont-stay-at-bottom-and-problem-with-menu-height-100/#findComment-505581 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.