Footer will not stick to the bottom!

HTML & CSS
1

Hi, I recently created my first website with wordpress, and one of the big problems I had was that the footer included with the theme I used would not stick to the bottom of the page, this was most obvious with pages which didnt have much content and didn’t fill the page.
I tried adding spacing on each page to push the footer down, and this worked on the display I was using at the time, but after testing it on a larger screen proved that this wasn’t a proper fix.
I have researched the problem alot and have tried modifying the stylesheet, but have still not found a solution, and would be very grateful if someone could help me get to the bottom of this problem!
I have posted the ‘footer’ section from my stylesheet below.

/*--------------------------------------------------
						 FOOTER
---------------------------------------------------*/
#footer {
	color: #999;
	font-size: 11px;
	float: left;
	margin-top: 50px;
}
#footer a {
	color: #ccc;
	font-weight: bold;
}
#footer h3 {
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 400;
	color: #fff;
	display: block;
}
#footer ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#footer ul li {
	margin-bottom:15px;
}
#footer ul li .date {
	font: normal 11px/20px Helvetica,Arial,sans-serif;
    display: block;
}
#footer-content {
	width: 960px;
	margin: 0 0 0 -30px;
	padding: 0 30px;
	background-color: #444;
}
#footer-bottom, #footer-top {
	padding: 35px 0;
	overflow: hidden;
	position: relative;
}
#footer-bottom {
	background-color: #333;
	font-size: 11px;
	/*border-top: 1px dotted #777;*/
	padding: 25px 25px 18px 25px;
}
#footer-bottom p {
	margin-bottom: 0;
}
#footer-bottom a {
}
2

Hi welcome to Sitepoint :slight_smile:

It seems you are looking for a sticky footer which can only be achieved by using a carefully constructed approach as shown in the link above. It is not easy to add a sticky footer to an already designed site unless the structure is correct.

I’d need to see your live page so that I can grab the full html and css to see if it is compatible with a sticky footer approach. There is no quick fix as the only way to have the footer at the bottom is by constructing the page in such a way to make it possible.

The link I gave above should give you all the information you need to proceed but if you want me to check whether your page is suitable or not then I’d need to see a link to it or at least see the full html and css.

3

Thanks, and thanks for your quick response!

My site is www.bearbeginnings.co.uk

If you wouldn’t mind taking a look to see if it would be possible for me to make a sticky footer I would be very grateful, and if not then if you can suggest any other ideas that would be great :slight_smile:

4

Hi,

It’s a little awkward with header being outside the wrapper but you could do something like this for ie8+.




html,body{
height:100%;
margin:0;
padding:0;
}
#header-wrapper:after{
content:" ";
display;block;
height:0;
visibility:hidden;
clear:both;
}
#wrapper{
width:100%;
height:100%;
display:table;
}
*+html #wrapper{/* ie7*/
height:auto;
min-height:100%;
}
#footer{
clear:both;
margin:-161px 0 0;/* footer and header height */
}
.content-wrapper{padding-bottom:161px}/* footer and header height */

(Place those rules after the originals as they over-rides and not replacements)

Note that this method means that your header and footer must remain a fixed height. If you change their height or content via media queries then you will also need to change the rules above to match the new heights.

If you needed a fluid height footer then you would need this method (ie8+) instead but the structure has to be changed to match exactly.

5

Hold on with the above code - I need to change it a little - back in 10 mins :slight_smile:

6

This is closer but probably needs tweaking:



html,body{
height:100%;
margin:0;
padding:0;
}
#header-wrapper:after{
content:" ";
display;block;
height:0;
visibility:hidden;
clear:both;
}
#header-wrapper{
position:relative;
z-index:99;
height:111px;
overflow:hidden;
}
.content-wrapper {
padding-top:161px;/* footer and header height */
}
#wrapper{
width:100%;
height:100%;
float:left;
display:table;
margin-top:-161px;/* footer and header height */
position:relative;
z-index:1;
}
*+html #wrapper{/* ie7*/
height:auto;
min-height:100%;
}
#footer{
clear:both;
margin:0;
}
7

Thank you very much! It now sticks to the bottom, but for some reason the spacing has gone weird at the top, the logo has been pushed up higher! Any ideas?
Thanks very much for your help so far, nearly there!

8

HI,

I can’t see where you have added this rule that was in my code above:


.content-wrapper {
padding-top:161px;/* footer and header height */
}

That rule is needed to offset the negative margins.

9

I just double checked and it is in the style.css.

Any other ideas?

Thanks!

10

You are probably over-riding it later in the stylesheet.

Try this:


.content-wrapper {
padding-top:161px!important;
}