Footer at the bottom

The main problem I'm seeing is that most of your DIVs have a position of absolute.  Therefore, when a relative element, like the footer, is placed, it positions itself at the upper most point. It ignores the absolutely positioned elements.  

You would need to take position:absolute off of the other elements.

Also, do you have a working page you can show us?  I didn't see one with the same footer on it.

may be a similar thread
https://www.experts-exchange.com/questions/25101029/Make-Footer-stick-to-bottom-using-CSS.html

The other solution, which may serve you better, is to give the #footer a position:fixed and bottom:0px.  

I will then work on removing the ABSOLUTE positions and see if I can manage without.
Will update once done. Thanks!

@nsiotto: Did you see my second comment?  If your layout will ONLY work with absolute positioning then my 2nd comment may serve you better.

Yes I saw it and already implemented but this solution doesn't make me crazy to be honest.

Understandable.  Like I said, it truly depends on your needs.  Start removing the absolute positioning and then let us know where your at.

If I move the absolute positioning then I need to remake half of the graphics and page layout.
Some images are positioning on top of other backgrounds. And if I remove the absolute then it messes up all has been done so far. I need to think about it, on whether to have a footer which is not a DIV or a fixed one which as I said it's not the ideal solution I had in mind.

I understand. Unfortunately, with all of those elements positioned absolutely, you may be hard pressed to find a proper/semantic/validated solution.

Last resort, could be a Javascript positioning script.  The idea would be to throw the element to the bottom of the page no matter what.  

Javascript positioning script seems a good idea.
Any practical suggestion in mind?