CODEWITHSUNDEEP
htmlcss
Code
Code

Reputation: 13

Fixing footer to the bottom of a page

How can I fix my footer to the bottom of the page while centered? I can't figure it out for the life of me.

I want the footer to sit at the bottom of the page in the center at 50%, but the margin-left and right isn't working for some reason. It's sitting towards the left.

.navigation2 {
  padding: 8px;
  background-color: #888;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0px;
}
<footer>
  <div class="navigation2">
    &copy; 2019 - <a href="index.html">X</a>
  </div>
</footer>

Any help would be highly appreciated.

Upvotes: 1

Views: 65

Answers (1)

ryantdecker
ryantdecker

Reputation: 1810

you may just need a little bit different approach to the math. This may get you closer to what you're looking for:

CSS:

.navigation2 {
    padding: 8px;
    background-color:#888;
    left: 25%;
    right: 25%;
    position: fixed;
    bottom: 0px;
}

Another way you could do it that's more dynamic (works whatever the width of your footer) and scales better so your footer isn't squeezed as much on small screens:

.navigation2 {
    padding: 8px;
    background-color:#888;
    left: 50%;
    transform:translatex(-50%);
    position: fixed;
    bottom: 0px;
}

Upvotes: 2

Related Questions