Footer stuck at the middle

By ‘button’ do you actually mean bottom ?

Using position:fixed will keep the footer at the bottom of the viewport at all times. However it means that the last element on the page will be obscured by the fixed footer and you won’t be able to see the last 120px or so that is hidden behind the footer.

The usual solutio is to add some padding bottom to the container that matches the footer height.

e.g.

.wide #wrapper.container,
#wrapper.container  {
    padding: 0 0 120px!important;
}

(I don’t know why you are using !important on the padding but I left it in place anyway.)

Of course if the footer wraps at smaller screens then the height of the footer changes so you will need to use media queries to take care of that. Generally fixed footers are best for small footers with little content.

A ‘sticky footer’ is one that generally sits at the bottom of the viewport when there is little content but sits at the bottom of the document if content is greater than the viewport (although the term ‘sticky’ is now currently associated with elements that move and then stick so is a little confusing working out the jargon :))