I have a template with a content area in which I want to add a centered navigation block. The navigation block is supposed to look like this:

|----|-------------------|----|
| << | 1 2 3 4 5 6 7 8 9 | >> |
|----|-------------------|----|

There are 3 blocks: the right and the leftmost ones are divs containing an "a" element with display: block, fixed width/height and a background image.
The middle block contains a variable amount of links (which means that I can't set the width), each one with display: block and a border around them, all floated left, just like the 3 upper-level blocks.
Now, this is my relevant code:

<div id="content">
    <div id="pagination">
        <a href="#" class="prev-btn goleft"></a>
        <div class="pagination goleft">
            <a href="#">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
        </div>
        <a href="#" class="prev-btn goleft"></a>
    </div>
</div>

And this is the CSS:

#content {
    width: 800px;
}
div#pagination { 
    margin: 0 auto;
    display: table;
    overflow: hidden;
}
.goleft { float: left; }
a.prev-btn, a.next-btn {
    width: 30px;
    height: 26px;
    display: block;
}
div.pagination { 
    height: 25px;
    overflow: hidden;
    padding: 4px, 10px 0 5px;
    background-color: #141414;
}
div.pagination a { 
    float: left;
    padding: 2px;
    color: #fefffe;
    text-align: center;
    border: 1px solid #51ae1b;
    display: block;
    margin-left: 8px;
}

The problem with this code, is that it doesn't quite work on firefox, and works even worse on opera.
On opera, with enough links in the middle div, the left and right divs are always above and below the middle div, respectively.
On FFox, the right div seems to stay in place or go below the other 2 divs, but not consistently.
On both, the middle div is longer than the elements within, and I really can't understand why it does that - if I set a width everything is fine, but it's really not possible.
What am I doing wrong?

1 answer

0
points

An easier method would be:

  div#pagination {  
    position:relative; 
    height:26px; 
   width:100%; 
 }

a.prev-btn { position:absolute; top:0; left:0; width:30px; height:26px;}

a.next-btn { position:absolute; top:0; right:0; width:30px; height:26px;}

div.pagination { width:auto; padding:0 30px; overflow:hidden;}

div.pagination a { float:left; padding:2px; text-align:center; border:1px solid; display:block; margin-left:8px;}
Answered almost 8 years ago by Divya Manian
  • Not that easy, unfortunatly - I cannot set width: 100%, because #pagination is inside a fixed-width div inside which it should be centered, as I said at the start: "I have a template with a content area in which I want to add a centered navigation block" - for this reason, it wouldn't work. Razor almost 8 years ago
  • Then you just need to set the width to what you want and add margin:0 auto; to center the div#pagination. Divya Manian almost 8 years ago