How do I make sure that my footer shows all the way at end of the page rather than in the middle?

Question

Here\'s my footer css:

 .footer {
      background-color: #CACACA;
      font-size: 20px;
      height: 50px;
      padding-top: 10px;
      position: absol         


        

Answer 1

Without seeing the corresponding HTML, it's a bit hard to guess what your issues might be. It sounds like there's a bottom margin on your main content that's pushing the page bottom downward past the footer when there's only limited content inside that main section.

To fix it, either adjust that margin or else change the positioning of the footer. At the moment, the position is absolute, which means that the footer is positioned based upon the its parent element in the HTML. Switching the positioning to relative will make it appear just after whatever element comes just before it in the HTML.

I suggest you read more about CSS positioning before trying to work on the issue further.