Aligner 2 div : compatibilité navigateur

Version imprimable

Bonjour,

sur mon site web j'ai un menu à gauche et le contenu de mon site à droite. Pour aligner ces 2 div j'ai utilisé
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 div#Idivcontenu{ background-color:#6C92CA; margin-left: 380px; padding-left:7px; padding-top:1px; min-height:450px ; } div#MonMenu{ /*float permet de mettre 2 div l'une à coté (ici gauche) de l'autre*/ float:left; background-color:#6C92CA; } div#MonFooter{ /*Permet de supprimer le glissement due à float:left*/ clear:both; font-weight: normal; /*grosseur du texte*/ font-size:x-small; /*taille du texte*/ font-family:Arial, Helvetica, sans-serif; }
Tout fonctionne bien sauf sous IE7 et FF2.0 où les 2 div ne sont pas aligner mais l'une est en haut à gauche et l'autre en bas à droite.
Pourquoi cette différence ?

Merci de votre aide

Dans ce cas la généralement je mets un attribut float sur les deux div qui doivent être alignés.

Essaye également de déclarer la largeur de ton menu et du conteneur (je crois que IE 6 ou 7 n'aime pas quand il n'y a pas de taille déclarée):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div#Idivcontenu{ float:left; width: 300px; background-color:#6C92CA; margin-left: 380px; padding-left:7px; padding-top:1px; min-height:450px ; } div#MonMenu{ /*float permet de mettre 2 div l'une à côté (ici gauche) de l'autre*/ float:left; width: 200px; background-color:#6C92CA; }

19/08/2009, 13h57
Macmillenium

Bonjour,

Citation:

Envoyé par Général03

Tout fonctionne bien sauf sous IE7 et FF2.0 où les 2 div ne sont pas aligner mais l'une est en haut à gauche et l'autre en bas à droite.
Pourquoi cette différence ?

Il n y a pas de raison, pourrais tu nous montrer ton code (X)HTML complet STP ?

Citation:

Dans ce cas la généralement je mets un attribut float sur les deux div qui doivent être alignés.

Non toujours le même comportement

Citation:

Essaye également de déclarer la largeur de ton menu et du conteneur (je crois que IE 6 ou 7 n'aime pas quand il n'y a pas de taille déclarée):

En effet si je fais cela j'obtiens bien mes 2 div alignées mais du coup elle ne sont pas de la largeur de la page (j'ai essayé min-height mais dans ce cas les div ne sont plus alignées)

Citation:

Il n y a pas de raison, pourrais tu nous montrer ton code (X)HTML complet STP ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <body> <div id="MonMenu">  <div id="IListeMenu"> </div> <div id="Imeteo"> </div>  <div> </div> </div> <div id="Idivcontenu"> <div> </div> <div> </div> </div> <div id="MonFooter"> </div> </body>
Le contenu de chaque balise est longue donc j'ai supprimé le contenu.

19/08/2009, 18h28
Macmillenium

Le margin-left attribué à #Idivcontenu devrait être égale à la largeur de #MonMenu.
Et encore je ne suis pas sûr que ce soit l'origine du problème.
T'as rien d'attribuer aux autres éléments ?

Poste la totalité du code (X)HTML/CSS stp.
20/08/2009, 00h31
CCyrillus

le min-height (et le width aussi) confere le haslayout dans IE7 , la marge va donc s'appliquer au bord du flottant et pas de la page . si tout est reglé au pixel , il va passer sous le flottant faute de place pour la marge.
<edit-hs-note>jetez le vieux IE7 stand alone et IE6 et laissez s'installer IE8</edit-hs-note>

Pour FF2 , la majuscule dans l'id est peut-etre la cause de ton souci . chiffre et majuscule sont interdits en guise de premier caractére (me semble t-il ...) . Mais a chaque fois que j'ai vu ça , FF2 zappe tout les styles des id ainsi nommé.

Sans code , pas franchement possible de t'en dire plus .

Test quand même sans le min-height et sans le width , ou sans marge + overflow et modifie tes id comme ceci :
monMenu , idivcontenu monFooter dans le html et
#monMenu , #idivcontenu , #monFooter dans ta feuille de style.

GC

<mode> je fais gaffe au terme que j'emploi ;) </mode>
20/08/2009, 10h44
Macmillenium
<HS>

Citation:

Envoyé par CCyrillus

le min-height (et le width aussi) confere le haslayout dans IE7 , la marge va donc s'appliquer au bord du flottant et pas de la page . si tout est reglé au pixel , il va passer sous le flottant faute de place pour la marge.

Concernant le HasLayout et les margin :
- Sous IE7 la marge gauche se réfère au conteneur, pas l'adjacent flottant ;
- Sous IE6- la même chose, sauf le bug des 3px jog qui apparait ici à l'extérieur.
Concernant le contexte de formatage et les margin :
Le comportement a changé avec les nouvelles versions de Firefox, Opéra et Safari.
- Sous IE8, Firefox3+ et Safari4 la marge gauche se réfère au conteneur ;
- Sous Opéra, Firefox2 et SeaMonkey la marge gauche se réfère à l'adjacent flottant.
EDIT : tests effectués sur des versions natives.

</HS>

En faite j'ai mis une largeur à mes div et je leurs aient affectées un margin et le tour est joué. Mes 2 div sont alignées sur tous les navigateurs :ccool:.
Voilà mon CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 div#MonMenu{ /*float permet de mettre 2 div l'une à coté (ici gauche) de l'autre*/ float:left; background-color:#6C92CA; /*Rajouter cela sinon les 2 div ne se mettent pas à coté*/ margin-left: 0px; width:270px; } div#Idivcontenu{ background-color:#6C92CA;/*#3E6FB9; couleur de fond de la page*/ margin-left: 380px; padding-left:7px; padding-top:1px; min-height:450px ; min-width:300px; }
Merci de votre aide