Div dynamique floée avec blocs flottants imbriqués

Question

J'ai un modèle avec une zone de contenu dans laquelle je veux ajouter un bloc de navigation centré. Le bloc de navigation est censé ressembler à ceci:

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

Il y a 3 blocs: la droite et l'extrême gauche sont ceux qui sont divs contenant un « un » élément avec display: block, largeur/hauteur fixe et une image d'arrière-plan .
Le bloc du milieu contient une quantité variable de liens (ce qui signifie que je ne peux pas définir la largeur), chacun avec display: block et une bordure autour d'eux, tous flottants à gauche, tout comme les 3 blocs de niveau supérieur.
Maintenant, voici mon code correspondant:

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; 
 
}

<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>

Le problème avec ce code, est qu'il ne fonctionne pas tout à fait sur Firefox, et fonctionne encore pire sur l'opéra.
Sur l'opéra, avec suffisamment de liens dans le div central, les divs gauche et droite sont toujours au-dessus et en dessous de la div du milieu, respectivement.
Sur FFox, le div juste semble rester en place ou passer en dessous des 2 autres div, mais pas de manière cohérente.
Sur les deux, le div moyen est plus long que les éléments à l'intérieur, et je ne peux vraiment pas comprendre pourquoi il fait cela - si je définis une largeur tout va bien, mais ce n'est vraiment pas possible.
Qu'est-ce que je fais de mal?

Answer 1

Si vous ne pouvez pas définir une largeur, essayez la méthode Shrink Wrap.

Voici un peu plus d'info d'un autre poste ici: centering a div without setting width