Footer/ 100% Height

HTML & CSS
1

Hi

I’m sorry for bringing this up but I simply cannot do this and its driving me mad

I’ve been through Paul’s example in the FAQ and have managed to add a column to the left and right of my page but cannot get my footer to stay to the bottom (not sticky)

1 - From Paul’s thread I noticed there was two methods of adding a border each side, one is a left and right div, the other is sizing the ‘content’ div. Which is best if I would like to add images in the border. does it matter? I can get both to work but wondered if there was a benefit to one over the other.

2- why won’t my footer stay at the bottom of the page? Is it because I have relative elements in my ‘content’

http://www.togganet.co.uk/RB%20-%20sheffield-fair-play-league.html

2

Just from a quick glance at your code, it seems you haven’t followed a lot of the steps for creating a sticky footer. I recommend going through the code step by step and checking it against your own code. For example, don’t set any of your elements as position: absolute. Paul’s example certainly doesn’t do that, and it messes up the layout.

Everything needs to be inside the #outer div, as well, including the footer.

3

Thanks Ralph

I think its because I’ve tried to do this with my current code, guess I’ll have to re-think the whole code.

When you say sticky footer, guessing you mean one that is always visible? I actually want to avoid that and ONLY have it at the bottom of the page

Let me go away and sort the code

Thanks

4

To clarify: :slight_smile:

Sticky Footer
A sticky footer is a footer that sits at the bottom of the document in the normal flow when the document is greater than the viewport height. It just behaves like a normal footer when the content is below the fold (below the viewport). However, when content is less than viewport height the sticky footer sticks to the bottom of the viewport rather than following the content up towards the header and looking a little silly on short pages.

Fixed Footer
A fixed positioned footer always sits at the bottom of the viewport no matter what. It does not scroll with the document and is removed from the flow and does not interact with other content. That means that you always have to add padding-bottom (equal to the height of the footer) to the last element in your page so that it isn’t hidden behind the fixed footer.

5

Why you use the following code?

position: absolute;

, I think you should use relative. dont use absolute.

6

Hi,

You can’t have a footer under both columns when you have created 2 absolute columns as that is impossible.

You need to float the columns and then clear the footer to make it stay below. (If you need a sticky footer then follow the faq but it doesn’t look like you are implementing that anyway.)