Question

I’m making a very simple website and I’ve got a problem with my footer: it’s not centering. I’ve done all the margin-left:auto; and right things, and the problem persists in Chrome and Firefox. The code:

#footer {
  position: fixed;
  z-index:10;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  height:35px;
  bottom:0px;
  background-color:#363636;
  /* Style info that has nothing to do with the problem below this line */
  box-shadow: 1px -2px 6px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:1px -2px 6px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:1px -2px 6px rgba(0, 0, 0, 0.5);  
  border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
}

Already tried typing in “display:inline-block;”.
The index.html code (ofc it’s still in-dev, has nothing): http://d.pr/btSa

Thanks in advance.

Answer 1

The reason your footer is not centering with margin is because of the postion:fixed. Remove that and it will obey your margin auto‘s.

If you need it to be fixed, update your css to look like this:

#footer {
  position: fixed;
  z-index:10;
  bottom:0;
  left:50%;
  margin-left: -500px;
  width: 1000px;
  height:35px;
  bottom:0px;
  background-color:#363636;
  /* Style info that has nothing to do with the problem below this line */
}

note adding the bottom:0;, left:50%; and updating the margin properties.