tommybfisher Posted August 31, 2011 Share Posted August 31, 2011 My site has a footer which remains at the bottom of all my pages, regardless of the height, apart from the page which accesses the mySql database via the while loop. This page contains a simple guestbook I created. As posts are added to the guestbook, the page's height grows, but the footer ignores the height of the page and sticks to the bottom of the screen and not the bottom of the page. I've tried to contain all the posts in a div with overflow:hidden to ensure it pushes down the footer div, but this seems to have no effect. I've used an absolute position on the footer to make sure it stays to the bottom of the page for when the page height is less than the screen. I've had a search for this problem, but haven't yet found any solutions, so any advice or pointers would be grateful. The basic format of the page is: <!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=UTF-8" /> <title></title> <link href="css/reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <link href="css/style.form.css" rel="stylesheet" /> </head> <body> <img src="images/bg.jpg" class="bg" /> <a name="top"></a> <div id="wrapper"> <div id="header"> <div id="logo"> </div> </div> <div id="menu"> </div> <div id="body" class="clear"> <link href="css/style.guestbook.css" rel="stylesheet" /> <div class="block"> <h1>Guestbook</h1> <p>Please sign the guestbook below with any opinions or advice you may have for us. We'd love to hear your thoughts.</p> </div> <div class="block"> <form action="includes/guestbookincl.php" method="post"> <label for="name">Name</label><input type="text" id="name" name="name" /> <input type="submit" id="submit" value="Post message" /> <label for="text">Your message</label><br /> <textarea id="text" name="text"></textarea> </form> </div> <div class='divide_message'> <!--FIRST WHILE LOOP--> <div class='block message'> <div class='message_name'>Frankie H<span class='date'>30/08/11</span></div><br /> <div class='message_message'>Wonderful news!</div> </div> <!--END OF FIRST WHILE LOOP--> <!--SECOND WHILE LOOP--> <div class='block message'> <div class='message_name'>James Thorton<span class='date'>30/08/11</span></div><br /> <div class='message_message'>So pleased for you both, can't wait to see you then!</div> </div> <!--END OF SECOND WHILE LOOP--> </div> <!--end of .divide_message--> </div> <!--end of #body--> <div id="footer"> © 2011 </div> </div> <!--end of #wrapper--> </body> </html> The significant css elements are: html { height: 100%; } body { height: 100%; } #wrapper { width: 1000px; background-color: #f0f9ff; min-height: 100%; margin: 0 auto; text-align: center; position: relative; overflow: hidden; clear: both; } #body { width: 1000px; padding-bottom: 20px; } #footer { height: 20px; font-family: helvetica, arial, sans-serif; font-size: 0.6em; color: #777777; position: absolute; bottom: 0; left: 380px; } .block { padding: 10px; margin: 10px; text-align: left; border: 1px solid #a1dbff; position: relative; overflow: hidden; } .divide_message { overflow: hidden; } Quote Link to comment Share on other sites More sharing options...
tommybfisher Posted August 31, 2011 Author Share Posted August 31, 2011 fixed, somehow had an extra closing div in my code :-\ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.