Discussion :

[PaladinFr]

bonjour.
J'ai un probleme qui a priori devrait simple à resoudre mais je m'arrache les cheveux dessus.

Je suis en train de faire un systeme d'onglet en div.
Pour ca je divise verticalement mon ecran en 4 div.
1) div de 10 pixel de largeur
2) div de largeur variable s'adaptant au texte (je ne fixe pas la longueur car la longueur du texte peut changer suivant la langue)
3) même chose avec un autre texte
4) div de "fin" occupant le restant de l'espace.

J'appliquerais plus tard des styles de bordures sur la div 1 et 4 (c'est pour ca que j'en ai besoin et que j'ai besoin que la div 4 prenne bien tout le restant de l'espace dispo)

Le souci c'est sur cette div de fin.
Si je mets width:100% sous ie8 c'est bien le restant de l'espace qui est pris, sous firefox c'est l'ensemble de l'espace qui est pris (les 3 premieres div sont recouverte par cette 4eme div)

Comment faire pour indiquer que je veux prendre le restant de l'espace disponible ? (sachant que je ne peux pas indiquer la taille en pixel vu que les tailles des div 2 et 3 sont variables...)
Ca doit etre simple mais la je vois pas

voila mon code (le css n'est pas encore séparé).
le background blue est juste la pour mettre en evidence le probleme.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div style="position:absolute;top:25px;width:100%;">
  <div style="position:relative;float:left;width:10">
        &nbsp;
   </div>	
   <div style="position:relative;float:left;">
       texte 1
   </div>
   <div style="position:relative;float:left;">
       texte 2
    </div>
    <div style="position:relative;background:blue;width:100%;">
       &nbsp;
    </div>
</div>

[PaladinFr]

J'ai trouvé, il suffit de rajouter overflow:hidden sur la derniere colonne.

c'est logique d'ailleurs, on lui demande de cacher ce qui déborde sur les autres div.
Ouf je commencais à devenir chévre