CSS / Problème de float & div Fermé

Question

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

pijaku · Accepted Answer

Autant pour moi, je n'avais pas tout lu...
Une solution, ne sachant pas pourquoi tu veux faire ça consiste à :
1- inverser div2 et div3 effectivement,
2- div2 au lieu de float : right; mettre : margin-left: 320px (400 - 75 - bordures)
3- div3 ajouter : float:left;
ça rends à peu près ce que tu veux.

meuhlol · Answer

Pourquoi ne pas mettre un truc du genre:

sous IE les bordures ne sont pas comptés avec la taille de la largeur du DIV. Sous firefox, la largeur des bordures est comprise dans la largeur de div, donc y mettre un width de 2 pixels de moins (798)

SchtroumpfProgrammeur · Answer

En fait ce n'est pas exactement ce que je cherche à faire. De plus j'utilise le modèle des boites "correcte" donc jen'ai pas de soucis de largeur. Je te mets le code HTML pour que tu puisses essayer sous IE7 (attention ça ne marche pas sous FireFox) :

display: inline-block

NB: Tu remarqueras que même comme ça il y a toujours un problème, car DIV3 est collée contre DIV2 sans marge...

pijaku · Answer

Salut, Inverse div2 et div3 dans ton code html :

display: inline-block

et dis nous ce que tu en penses...

SchtroumpfProgrammeur · Answer

Merci à vous tous pour vos message. Malheuresement ça ne marche toujours pas :-(

Je ne peux malheureusement pas inverse DIV2 et DIV3 comme tu le proposes Pijaku car dans le site sur lequel je travaille (je n'ai posté qu'un exemple) la largeur de DIV1 est exprimée en pourcentage avec des max-min et il est donc difficile de spécifier une marge de largeur connue ou de positionner DIV2 en absolut ou autre...

Je ne vous cache pas en revanche que celà fait longtemps que je butte contre ce problème et que je si je suis venu ici c'est parce que j'étais à court d'idées :-/

CSS / Problème de float & div

5 réponses

Discussions similaires