So close, but I can't seem to get a fixed footer with three columns to work…

Question

I apologize if this has been addressed elsewhere, but I've been looking all over and can't seem to figure this out.

I am trying to have three links across the bottom of the page which will be fixed, i.e. no matter how large the page or window is, they'll always be along the bottom, on a layer above the rest of the page content. I want one link to be left aligned, one to be center aligned, and one to be right aligned within the page margins (I set the body margins to 20px).

After a lot of fiddling around and trial and error, I have come pretty close, but I can't seem to get the proper margins around the text. I think it might be more clear if I just send a link to the page as it stands now—please disregard the colored backgrounds :)

http://www.chrissvensson.info/ces85/033

I have tried everything I can think of. If anyone has any suggestions, I would really really appreciate it. And feel free to tell me I'm going about this all wrong!

Here is the html:

<div class="bottom-nav">
    <h2 class="previous-link">Previous</h2>
    <h2 class="index-link">Index</h2>
    <h2 class="next-link">Next</h2>
</div>

Here is the CSS:

.bottom-nav {
  position:fixed;
  bottom:0px;
  width:100%;
  margin: 0 -20px 0 -20px;
  background-color: red;
} 
.previous-link {
  width: 25%; 
  float: left;
  z-index:1999; 
  background-color: blue;
  margin-left: 0;
}
.index-link { 
  margin: auto;
  z-index:1999; 
  width: 50%;
  text-align: center;
  float: left;
  background-color: yellow;
}
.next-link { 
  width: 25%;
  float: right;
  z-index:1999; 
  text-align: right;
  background-color: green;
  margin-right: 0;
}

Thanks in advance!

Answer 1

Try to add
.previous-link a {margin-left:20px} or
.previous-link a {padding-left:20px},
and the same on the other links. Like this you dont mess with the div so much but move link where you want it.
Hope it helps!