Take the 2-minute tour ×

I have a group of links used for paging, like so:

enter image description here

As you navigate through the pages, the links change based on which page you're on. This changes the total width that they take up and causes them to move all over the place, making it really ineffective as a convenient paging tool.

Here's an example of how wide they as you go deeper:

enter image description here

What I need is for these links to maintain their positions and for their container to maintain its width. I'm no CSS expert, but I'd greatly appreciate it if somebody could help me out.

share|improve this question
add comment

3 Answers

up vote 2 down vote accepted

Try something like this:

.line {
    display: table;
    width: 60%;  /* width of the group of navigation links, randomly set to 60% */
    margin: auto;
    text-align: center;
.unit, .unit-outside {
    display: table-cell;
    width: 5%;
.unit-outside {
    /* 'extends' the .unit class */
    width: 12.5%;


<nav class="line">
    <!--this contains all the navigation links -->
    <a class="unit-outside" href=""> First </a>
    <a class="unit-outside" href=""> Prev </a>
    <a class="unit" href=""> 1 </a>
    <a class="unit" href=""> 2 </a>
    <a class="unit" href=""> 3 </a>
    <a class="unit" href=""> 4 </a>
    <a class="unit" href=""> 5 </a>
    <a class="unit" href=""> 6 </a>
    <a class="unit" href=""> 7 </a>
    <a class="unit" href=""> 8 </a>
    <a class="unit" href=""> &hellip; </a>
    <a class="unit" href=""> 66 </a>
    <a class="unit-outside" href=""> Next </a>
    <a class="unit-outside" href=""> Last </a>

Essentially, the .line class acts like a <table> element (but is not semantically so) and the .unit classes act like <td> elements. This or something similar should give you the layout that you want and keep each 'cell', as well as the entire line, a consistent width.

share|improve this answer
This is an awesome solution. Nice. Looks like this assumes there are always 10 page links and 4 Next/Last links, so that the 5% cells add up to 50% and the 12.5% cells add up to 50%. This should be pretty easy to adjust with a calculator. Why is .line set to 60% though? –  brentonstrine Jun 27 '13 at 23:28
@brentonstrine I just chose an aesthetically pleasing width for the group of links. I figured 100% would be too big. As a matter of fact, my answer is just a template that the OP is free to modify to meet his/her needs. Thanks for the positive feedback! –  chharvey Jun 28 '13 at 4:05
I'm going to give this one a shot. –  kehrk Jun 28 '13 at 16:51
Unfortunately my site doesn't support HTML5 yet so <nav> won't work for me... any other ideas? –  kehrk Jun 28 '13 at 17:05
Also, without the <nav>, my links appear down the page rather than in their designated <td>. Think I can get it to work? –  kehrk Jun 28 '13 at 17:06
show 1 more comment

Give each link a fixed width. (JSFiddle) Assuming you won't have any pages higher than 999, set the width of each link to assume it as 3 digits in there. I'd do it with CSS by making the link a block level element, specifying a width, and centering it--though you may want it to be right/left aligned. If you support newer browsers, you can do inline-block, but if not, you can set display:block and then float:left:

a {
  display: inline-block;
  width: 1.5em;
share|improve this answer
This is definitely the simplest answer. It does almost exactly what I need with no tweaking, so just a couple little touch-ups and I'm good to go. Thanks a ton! –  kehrk Jun 27 '13 at 23:20
This appears to be the solution, however the links still move just a little bit when the length of the numbers grows. I can apply classes to the links based on their length, but I'm not sure how wide to make each one based on its length. Any ideas? –  kehrk Jun 28 '13 at 16:07
Hm, they shouldn't really move... could you provide a link to your site or copy your code into a JSFiddle? You might also try TestSubject528491's solution, which is a really great approach if you don't need your list of links to wrap onto multiple lines when the width changes. –  brentonstrine Jun 28 '13 at 16:42
add comment

You will need to specify the widths of each page number/ first / prev / next/ last to the worst case value. If it is not set it will dynamically change (get wider) when a number goes from one to two digits (5->55)

share|improve this answer
add comment

Your Answer


