CSS: три ссылки на фоновые изображения: плавающий крайний левый, один крайний правый и один центр?

Question

Я хочу использовать CSS для создания навигационного макета, для серии постов в блоге, каждая из которых является главой серии мультфильмов:

<div with 500px width>-------------------------
-----------------------------------------------
-----------------------------------------------
<div>
<<previous          +more                >>next
</div>
</div>

'previous', 'next' и 'more' - все пустые div (но могут быть интервалами) с шириной 50px и фоновым изображением. Они ссылаются на соответствующие места.

Я использую спрайты CSS для создания хороших эффектов при наведении, что также означает, что я не могу легко изменить ширину каждой ссылки, не испортив спрайты.

Что касается меня, я не могу понять, как стилизовать три деления, чтобы «предыдущий» плавал в крайнем левом положении, «еще» - в центре, а «следующий» - влево.

Может кто-нибудь помочь?

Спасибо.

---

Answer 1

Можете ли вы просто определить поле, так как я предполагаю, что контейнерный div всегда будет 500?

Так что-то вроде

<div style="width: 500px">
<div style="float: left;">Previous</div>
<div style="float: left; margin-left: how ever many pixels it takes to center;">more</div>
<div style="float: right;">Next</div>
</div>

Answer 2

.previous {
  width: 50px;
  float: left;
  background-position: left; 
}
.more {
  width: 400px;
  float: left;
  background-position: center;
}
.next {
  width: 50px;
  float: left;
  background-position: right; 
}