How to push footer div to stay at bottom of screen

HTML & CSS
1

Hello. I’ve been working on a new design for a wordpress theme and im having some issues with getting the footer div to stay positioned at the bottom of the screen at all times…

you can see here: http://test.miintleaf.net/

I’ve tried a fixed position, a sticky position, every position and ive adjusted and readjusted the coding a million times and i still cant figure it out

i’ve also read a dozen or more other posts and none of their solutions seem to be helping.

this is my footer css

#footer {
clear : both;
color : #cecece;
letter-spacing: 2px;
font-family: "basic"; 
font-size : 20px;
margin-left : auto;
margin-right : auto;
text-align : center;
 position: absolute;
 bottom: 0;
width: 100%;
height: auto;
background: url(/wp-content/themes/september2018/images/bg_footer2.png) left top repeat-x, url(/wp-content/themes/september2018/images/bg_footer3.png) left top repeat;
}
#footer a, #footer a:visited {
font-family: "basic";
color: #cecece;
}
#footer a:hover {
font-family: "basic";
color: #ed6d9a;
}
.footer_holder {
margin : auto;
padding : 0;
width: 100%;
height : 50px;
}
#footerbar_1 {
margin-left : auto;
margin-right : auto;
margin-top: 100px;
width: 50%;
font-family: "basic";
text-align : left;
background : none;
}
2

What you’re looking for is a sticky footer. Maybe this post will help.

3

I’ve read over that one before and it didnt help. or maybe i just wasnt understanding it.

4

Try this:

<div style="height:8.8em; background-color:lime;">
   spacer goes here
</div>

<div style="position: fixed; bottom: 0; left:0; width:100%;">
 blurb goes here
</div>

</body>
</html>
5

That’s pretty old now.

Try this more recent thread:
Problem with sticky footer - #2 by ronpat

1 Like
6

Thanks @TechnoBear. I always struggle with the forum’s search facility. :unhappy:

1 Like
7

Hello @thatwildhippie
I have checked your website and tried with the position: fixed; in your current css. Currently you have applied position: absolute; in the #footer code.

For example: Your current css code:

#footer {
clear : both;
color : #cecece;
letter-spacing: 2px;
font-family: "basic"; 
font-size : 20px;
margin-left : auto;
margin-right : auto;
text-align : center;
 position: absolute;
 bottom: 0;
width: 100%;
height: auto;
background: url(/wp-content/themes/september2018/images/bg_footer2.png) left top repeat-x, url(/wp-content/themes/september2018/images/bg_footer3.png) left top repeat;
}

And the updated code will be:

#footer {
clear : both;
color : #cecece;
letter-spacing: 2px;
font-family: "basic"; 
font-size : 20px;
margin-left : auto;
margin-right : auto;
text-align : center;
 position: fixed;
 bottom: 0;
width: 100%;
height: auto;
background: url(/wp-content/themes/september2018/images/bg_footer2.png) left top repeat-x, url(/wp-content/themes/september2018/images/bg_footer3.png) left top repeat;
}

Tested in both Chrome and Firefox browser.

Hope that helps…!!

8

Why not using Flex? Stick all content, except the footer, in a wrapper and use the following css:

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.wrapper {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

html

<div class="wrapper">
	div id="navigation"></div>
	<div id="header"></div>
	//.....other divs
</div>
<div class="footer">
// footer content
</div>
1 Like
9

Yes, this works to stick it to the bottom but now the problem lies with it overlapping the rest of the content… :frowning:

http://test.miintleaf.net/

10

A footer that stays positioned at the bottom of the viewport at all times is called a fixed positioned footer and is a completely different from a sticky footer so you will need to decide which you want :slight_smile: (A sticky footer is only positioned at the bottom of the screen if content is not screen height otherwise the footer follows the content as normal when below the fold.)

Be aware that a fixed positioned footer will sit on top of anything in the way and in a responsive site it is not easy to make room because of course the height of the footer will vary when content wraps. For this reason it is best to use fixed positioned footers for simple one line copyright messages or similar that will not wrap their content.

Others have already provided links to both fixed and sticky footers but here are a couple more :slight_smile:

Sticky Footer:

Fixed Footer:

3 Likes
11

Yes see my comments in the post above.

You will either have to use a magic number and place some padding on the last element to enable it to scroll above the fixed element. Of course that won’t work well in a responsive site so the only real alternative is to add a bit of js to track the height and add some dynamic padding to cater for the changing height (as in my codepen above).

2 Likes
12

but see in your “fixed footer” preview your “content area” scrolls while behind the footer and thats not what im looking for. im not trying to make the footer on top of everything at all times. i just want it to do what i had done on this layout… but it wont work on this new one… unless i just copied something wrong when transferring files

http://test.miintleaf.net/testlayout/

13

Then it sounds as if you want a “sticky” footer, not a fixed footer. There are examples above. (A sticky footer will appear at the bottom of the content, or at the bottom of the screen if the content is shorter than that.)

14

i finally got it to be where i need it but now my sidebar/content overflow the footer…

ive been staring at this for a total of 9 hours and im all but screaming.

15

You did nothing special at all in that layout as its just a normal footer sitting below any content. It does not stick to the bottom and is not fixed. It’s just a normal element in the flow?

Remove the position:absolute from Content as it should be floated (position:absolute means it cannot be floated because it is absolutely positioned).

Rather than just throwing random styles at elements try and understand what you have told them to do and it will make your life easier :slight_smile:

EDIT:

Just noticed you have also absolutely positioned the sidebar and you cannot do that and still have a footer. Remove the position:absolute from your #sidebar and remove the fixed height also as that is nonsense. Then change the margin-left on Content to 20px approx.

3 Likes
16

first of all thank you.

second of all please dont insult me. i’ve been doing this half of my life. just because im not as perfect as everyone on these forums doesnt mean i dont know what im doing…

like i stated earlier this is a layout pulled from old bits and pieces and i apparently just overlooked that bit while tweaking everything.

i appreciate the help but the insult was not needed. a simple hey i think you forgot to remove so-and-so would have worked…

17

Thank you :slight_smile:

Apologies if it sounded like that but it wasn’t meant to be. :frowning:

I know that pointing out someones errors can sound like you are berating them but usually I get the message across without hurting anyones feelings.

I will have to try better next time.:slight_smile:

1 Like
18

I see you have changed the styles for Content differently to what I suggested and you have used a negative top:margin on Content of -980px which is a magic number and should be avoided at all costs.

You don’t need that magic number at all so in Content remove the top margin (or set it to zero) and then set the left margin to 20px and not 280px as in your code (as I mentioned in my previous post). That will allow both columns to sit side by side without having to use a magic number and make them more reliable.

There is no need to give the sidebar a height either because that means you cannot add any more content without breaking the element or a user cannot resize text and have it all still fit.

1 Like
19

Thanks i was actually working on that when you posted it. those were just bits i threw in to try and pin point the problem earlier. i was in the process of removing them lol

2 Likes
20

Yes, You are write and i have a solution for that which is very easy.
Whatever the div is overlapping set the div to z-index: auto;
For example:
I have checked the Social Icons are ovelapping. To avoid this:

a.elites{
z-index: auto;
}

Similarly if there is another div or class which is overlapping you can apply same.
Do check the class name and ID before apply.
Still have any questions, feel free to ask…

Thanks