Positioning in container div

[Kon-Tiki]

Hey, I'm trying to position three buttons in a container div: a Previous, a Home and a Next button. The Home button should always go in the middle, while the Previous and Next buttons should go at the sides, with equal spacing between them and the Home button.

Basically, I want it to look like this:

----------------------------
|  ----------------------  |
|  |  Pr     Ho     Ne  |  |
|  ----------------------  |
----------------------------

I've tried with floats, but that made the Home button dependant of the Previous button, making the spacing between the Previous and Home button and between the Home and Next button not equal. Right now, I've tried this:

.previous {
  width: 90px;
  height: 20px;
  background-color: #408080;
  border: 1px solid #008040;
  text-align: center;
  position:absolute;
  left: 10px;
}

.home {
  width: 90px;
  height: 20px;
  position: absolute;
  background-color: #408080;
  border: 1px solid #008040;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.next {
  width: 90px;
  height: 20px;
  right: 10px;
  background-color: #408080;
  border: 1px solid #008040;
  text-align: center;
  position: absolute;
}

This works like a charm, except for one thing... the position: absolute; is relative to the page. If I could get that relative to the div it's contained in, it'd work like a charm. I do realize this kind of beats the purpose of position: absolute, though Any help'd be greatly appreciated. Thanks in advance

[fisherboy]

{position: relative;} positions something relative to its container. "absolute", as you've correctly pointed out, positions with regard to the edges of the window.

Try position: relative and see how it goes.

[LJK]

Hi -
I'd put those three links into a paragraph -
then you can center the text, set the width
to a % of the parent div & any padding on
the links [L&R] will affect the spacing.
[And skip positioning absolutely altogether!]

Good luck,
El

[Tyssen]

Skip absolute positioning certainly but I'd put the 3 links in an unordered list, set the list items to display: inline, float the previous left and the next right. The floats have to come first so home would be your last list item.