Jump to content

Keeping the footer at the bottom


grabenair

Recommended Posts

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 by grabenair
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...