grabenair Posted September 17, 2012 Report Share Posted September 17, 2012 (edited) Just thought I would sure this, had a friend ask me today how to fix his footer from showing up half way up on the page. To keep the footer at the bottom of the browser window no matter the size of the monitor. You just need to wrap everything in a div and add a little css. This works on any website including templates in WordPress or Joomla. Here is the HTML: <body> <div =id”keepFooterAtBottom”> or what ever you want to call it. <div id=”header”> </header> <div id=”content”> </content> <div id=”sidebar”> if you have one. </sidebar> <div id=”footer”> </footer> </keepFooterAtBottom> </body> Here is the CSS: html, body { margin:0; padding:0; height:100%; } #keepFooterAtBottom{ min-height:100%; position:relative; } #body { padding:10px; padding-bottom:20px; /* Height of the footer */ } #footer { position:fixed; bottom: 0; width:100%; height:20px; /* Height of the footer */ background:#E6F3F9; } Important: The position has to be what is specified for each css rule. Also The padding for the bottom of the body and the height of the footer has to be the same. You can place the css rules through out your css style sheet or you can do what I do and place them at the very bottom. I place them at the bottom and give them a comment /*keeping footer at the bottom css*/ this way I know it will work and nothing in the serendipity will over ride the new rules. Edited September 17, 2012 by grabenair Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 17, 2012 Report Share Posted September 17, 2012 Your HTML is wrong. You're getting HTML5 and 4 mixed up. It should be: <body> <div id=”keepFooterAtBottom”>or what ever you want to call it. <div id=”header”> </div> <div id=”content”> </div> <div id=”sidebar”> if you have one. </div> <div id=”footer”> </div> </div> </body> or <body> <div id=”keepFooterAtBottom”>or what ever you want to call it. <header> </header> <div id=”content”> </div> <sidebar> if you have one. </sidebar> <footer> </footer> </div> </body> Quote Link to comment Share on other sites More sharing options...
Andrea Posted September 18, 2012 Report Share Posted September 18, 2012 Just now see - the CSS has an error, too - it's not #body and if you go with the HTML5 way of doing things, the '#' needs to come off the footer. 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.
Note: Your post will require moderator approval before it will be visible.