Hi Guys,

 

Sorry, I'm in one hell of a rush to get a uni project finished for the morning. I'm sure I had the footer sticking to the bottom of the page (with some help from Rob thanks) but it it isn't and its annoying!

 

I don't have enough time to fiddle with it for ages, so if anyone knows how to get it to the bottom of the page i.e. sat at the bottom of the screen, or the browser window which ever is lowest... I would really appreciate the help.

 

URL: http://www.ecoheatco.co.uk/index.php

 

(P.S. it works on the front page because the content is long enough, but not on the other pages!)

 

Thanks,

Eris

Hi Guys,

 

Sorry, I'm in one hell of a rush to get a uni project finished for the morning. I'm sure I had the footer sticking to the bottom of the page (with some help from Rob thanks) but it it isn't and its annoying!

 

I don't have enough time to fiddle with it for ages, so if anyone knows how to get it to the bottom of the page i.e. sat at the bottom of the screen, or the browser window which ever is lowest... I would really appreciate the help.

 

URL: http://www.ecoheatco.co.uk/index.php

 

(P.S. it works on the front page because the content is long enough, but not on the other pages!)

 

Thanks,

Eris

I'm not sure I understand the question? The footer sits right at the bottom of each page on my browser (FF 1.5) except for on the investors page, where there's a strip of the background colour under it, but surely all you need to do there is add a little content?

Am I being stupid?

Good luck

I'm not sure I understand the question? The footer sits right at the bottom of each page on my browser (FF 1.5) except for on the investors page, where there's a strip of the background colour under it, but surely all you need to do there is add a little content?

Am I being stupid?

Good luck

 

Same for me in FF2.0 and I.E7.

Seems to be working for me on all pages using Firefox.

Haven't checked with any other browsers though.

It doesn't for me on investors, about, or contact.

 

And I don't have enough content for the pages to push it down

It's gonna be attack of the BRs!

I see your problem... when the body content is not high enough to push the footer down, there's an area of white space.

 

For a simple fix, I'd do the following:

 

Set the page background color to the same value as the bottom pixel of your footer background. Your footer will seemingly expand to fill the rest of the page. You would then need to create a wrapper for everything before your footer (possibly starting after your masthead) and set the background of that to white.

 

 

Hope that helps,

Craig

I'm testing in Flock 1.2, IE 7 and IE 6.

 

 

I'm sure it was working.. but it isn't for me now. I know it works on the front page but its the short pages that it doesn't work on.

I see your problem... when the body content is not high enough to push the footer down, there's an area of white space.

 

For a simple fix, I'd do the following:

 

Set the page background color to the same value as the bottom pixel of your footer background. Your footer will seemingly expand to fill the rest of the page. You would then need to create a wrapper for everything before your footer (possibly starting after your masthead) and set the background of that to white.

Hope that helps,

Craig

Thanks for that Craig, I'll bare it in mind if I can't find another solution. I somehow don't think having more footer than page is gonna look nice but it is a good idea for a quick fix!

In that case..

 

add this to footer:

 

#footer{
position: absolute;
bottom: 0pt;
width:	100%;
}

 

That should sort it

 

EDIT: This may fail on the longer content pages... may need a little tweak. Looking into it now

Could you use something like min-height:375px; in your CSS {#content} to force the height to fill the screen?

I believe this worked for me:

 

1) Wrap the whole page in a div. Set position: relative;

 

2) Add the css from the previous post to your footer

 

3) Add padding-bottom: 70px; to your #wrapper.

 

 

I'm just off to bed, so I only looked at this really quickly. Sorry if it doesn't work properly for you

Just to check if I'm reading this right...

 

You want the footer to appear at the bottom of the screen if the content doesn't push the footer down below that?

 

If so, 'm not sure you can do that without a bit of scripting to check the screen height and then either place it at the bottom of the screen or at the bottom of the content.. If you want the footer to always be at the bottom of the screen when scrolling (might be a useable compromise), change your footer def to:

 

#footer {

position: fixed;
clear: both;
width: 100%;
height: 50px;
bottom: 0px;
}

 

Then add a little bit of bottom margin to the content area to allow for the footer height.

I believe this worked for me:

 

1) Wrap the whole page in a div. Set position: relative;

 

2) Add the css from the previous post to your footer

 

3) Add padding-bottom: 70px; to your #wrapper.

I'm just off to bed, so I only looked at this really quickly. Sorry if it doesn't work properly for you

 

This works if you add min-height: 100%; to the page wrapper.

 

Thank you very much everyone for your help.