footer stick at the bottom

Question

what is the best solution to stick the footer at the bottom without it overlapping with the body content?

Answer 1

bottom of the browser window (so it floats) or bottom of your website?

Answer 2

bottom of website please

Answer 3

I presume you're using the footer tag. Have you tried just setting a top margin on the footer to separate it from the body?

Answer 4

i think i get it now. thanks.

Answer 5

Considering that your page has 3 main sections, header, main-container and footer, a good solution to have your footer always displayed at the bottom of your body content is to use display:flex on the body element and flex: 1 0 auto on main-container.. You need several CSS properties applied near the display: flex to make it work and use webkit prefixes for browser compatibility.
A short example would look like this:
body { display: flex; flex-direction: column; justify-content: center; }
.main-container { flex: 1 0 auto; }
header, footer { flex: none; }
You can learn more about flexbox by checking the next url:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/