Can't get my footer to stick to the bottom

Question

I've coding for about a week now and I'm learning all by my self (which hopefully explain a lot of my errors in this code).

I've tried dozen of examples to get my footer to stick to the bottom of the page. When i try to change the "position:absolute" of the wrapper or footer, it either gives a gap between the browser window and header or puts the footer up on the top.

I have no idea how to fix this. (Some tips for my code is also greatly appreciated!)

HTML http://pastebin.com/ksgJSUpz

CSS http://pastebin.com/i9nPtYkU

Thanks!

Answer 1

The problem is that you've been using position:absolute throughout your code. Absolute positioning breaks the flow of the document.

If you use relative positioning or if you don't define positioning at all (static position) the elements will run the one after the other. With your code you have to calculate the height of each element end start the next one where the previous ends by hand. This happens because absolute positioned elements don't push other element down. They are as if they have no height. For example you have your header height at 100px; and then you start your info with absolute positioning and top 100px;

Your footer will go and sit at the absolute position that you will tell him to. Problem is that you don't know what that position is since you have an element with variable height. If you put `bottom:0;' with absolute positioning the header will just go and sit at the bottom of its parent. Its parent in your case is the wrapper which has no specific height defined. So the #wrapper gets the height of its contents but since its contents are all absolute positioned inside it and as I said that breaks the flow it doesn't get any height from them. Instead the #wrapper gets the height of the window and not the whole document.

Best thing to do is redesign your page without absolute positioning.

Some quick fixes would be to give your wrapper a specific height like height: 1200px; That will force your footer to go and sit at the bottom of those 1200 pixels

Example with height at wrapper

Another solution would be to use fixed positioning for your footer. That would make the footer stick at the bottom of the window even while it scrolls.

Example with fixed positioning

But really what you should do is redesign the page from the start and to avoid absolute positioning where its not needed.