Bonjour à tous,

Je débute avec CSS et je me retrouve avec un problème. Plutôt que de mettre une floppée de code sans explications je vais plutôt détailler ce que je cherche à faire et ce que j'ai déjà fait.

Je dispose d'une première division (on va l'appeller DIV1) ainsi que d'une seconde division (DIV2) placée en float dans la première (DIV1). DIV2 a une hauteur plus petite que DIV1 de sorte qu'elle ne rempli qu'une petite partie de DIV1. Jusqu'ici pas de problèmes (normal)! Mon soucis c'est que j'aimerais rajouter une troisième division (DIV3) avec une bordure et une marge à gauche et à droite de 25px dans la première division (DIV1).

Le soucis c'est qu'en utilisant width: auto ou width: 100% la division prends toute la place disponible de DIV1 et empiète carrément au dessus de DIV2. Sous IE7 j'ai pu régler le problème en mettant DIV3 en display: inline-block et width: auto. Le problème c'est que cette solution ne fonctionne pas sous FireFox 2 & 3 et n'est (d'après quelques recherches rapides) d'ailleurs pas conforme au W3C. Bien entendu il est exclu de faire une marge égale à la largeur de DIV2 puisque DIV3 doit pouvoir s'adapter automatiquement en fonction de la présence ou non de DIV2 (pour rappel: DIV2 ne prends qu'une infîme partie de la hauteur de DIV1).

Quelqu'un aurait-il connaissance d'une façon de résoudre ce problème qui fonctionne dans la norme W3C ? Merci à tous ceux qui répondront mais aussi à ceux qui auront pris le temps de réfléchir pour m'aider :-)