ページネーションでよく使用される下図のような「次に進む/前に戻る」を実装する時に、少し考えこんで手が止まることが多かった。

左右に均等に配置するから float を使用する。width: 50% で指定するか。float を使うからその親要素に clearfix しなきゃいけないし、左右に配置された要素の中身をさらに text-align して左右に振って…というように、簡単な見た目に反して、実装の手間が結構かかる気がする。

これを float を使わずに、position を使うと話が簡単になる。

「次に進む/前に戻る」を囲う親要素を position: relative にして、基準位置とする。そして、「次に進む/前に戻る」を position: absolute にして、それぞれ左右の始点を 0px にすれば簡単に実装できる：

<nav class="pagenation">
  <a class="new" href="/page/2">&larr; 前に戻る</a>
  <a class="old" href="/page/4">次に進む &rarr;</a>
</nav>

nav.pagenation {
  position: relative;
  .old,
  .new {
    position: absolute;
  }
  .old {
    right: 0;
  }
  .new {
    left: 0;
  }
}

この方法だと float 解除を気にする必要がないし、最初の図のようにページ数を中央に配置したい場合は、 .pagenation に text-align: center を追加して、a タグと同じ階層にページ数を突っ込めば完了する。