Aligner 2 div : compatibilité navigateur

**Général03** · 19/08/2009, 09h23

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 :

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

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

**tom741** · 19/08/2009, 11h06

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 :

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

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

**Macmillenium** · 19/08/2009, 13h57

Bonjour,

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 ?

**Général03** · 19/08/2009, 16h59

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

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)

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

Code :

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

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">
 <!--Partie menu-->
 
 <div id="IListeMenu">   
 </div>
 
 <div id="Imeteo">    
 </div>
 
 <!--Partie Divers-->
 <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.

**Macmillenium** · 19/08/2009, 18h28

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.

**CCyrillus** · 20/08/2009, 00h31

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>

**Macmillenium** · 20/08/2009, 10h44

<HS>

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>

**Général03** · 20/08/2009, 18h04

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

.
Voilà mon CSS

Code :

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

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

Aligner 2 div : compatibilité navigateur

Positionnement en CSS

Discussions similaires

Partager

Partager