Discussion :

[tintin72]

Bonjour,

Je voudrais avoir 3 colonnes divs contenues dans
un div global mais j'ai un problème avec le div de droite:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<div id="global">
 
<div id="navigation">
 
<p style="margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim.
</p>
</div>
 
 
<div id="content">
 
<p style="margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim.
</p>
 
</div>
 
 
<div id="righter">
<p style="margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim.
</p>
</div>
 
</div>

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
17
18
19
20
21
22
23
24
 
#global {
  width: 100%;
  overflow: hidden;
}
 
/* Menu de navigation */
#navigation {
  width: 120px;
  float: left;
  background-color: #66cc33;
}
 
#content{
  float: left;
  width: 580px;
  background-color: #cccc99;
}
 
#righter{
  margin-left: 700px;
  background-color: #cfe1eb;
  width: 200px;
}

Les divs navigation et content se comporte normalement
dans les 2 browsers (FF, IE6), par contre le div de droite (righter)
pose problème.

Dans FF c'est presque bon sauf que le div descend de 20px
(dû au margin-top: 20px; des paragraphes j'imagine).
Dans IE6 le div se retrouve carrément en bas à droite.

Quel est le problème et comment faire pour que ça fonctionne dans les 2 browsers ?

D'avance merci.

[12monkeys]

Bonjour

Remplace par ceci dans ta css :

Code :

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

1
2
3
4
5
#righter{
  float:left;
  background-color: #cfe1eb;
  width: 200px;
}

Pourquoi mettre un margin pour positionner la troisième colonne ? Suffit de mettre un float: left...

[tintin72]

Merci pour ta réponse
En fait en cherchant sur le net j'ai trouvé un moyen un peu différent
mais plus "logique" pour aligner les colonnes.
Pour info, dans mon exemple il faut mettre:

Code :

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

1
2
3
4
5
6
7
 
#righter{
  overflow: hidden; /* Contexte de formatage. */
  height: 1%; /* Pour le HasLayout (IE)*/
  background-color: #cfe1eb;
  width: 200px;
}

[Candygirl]

Code :

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

1
2
3
4
5
6
7
 
#righter{
  overflow: hidden; /* Contexte de formatage. */
  height: 1%; /* Pour le HasLayout (IE)*/
  background-color: #cfe1eb;
  width: 200px;
}

Le height de 1% est ici inutile et devrait être retiré puisque le width de 200px donne déjà le layout.

De plus il faut éviter de conjuguer le overflow:hidden et le height de 1%, ce qui fait carrément disparaître le contenu du div sur les IE en mode quirks ... (=> IE5.5 et moins, IE 6 et 7 en cas de mauvaise déclaration du doctype). Il ne devrait donc être défini que pour les navigateurs le requiérant et l'overflow remis à visible.

L'ajout du height de1% dans le css doit être bien maîtisé pour prévenir ce genre de comportement qui pourrait survenir sur tous les navigateurs au cas où le parent serait appelé à recevoir un height explicitement renseigné dans le futur.

La technique de l'overflow + haslayout est particulièrement intéressante dans les cas où l'élément est de largeur variable, ce qui n'est pas ton cas ici, vu le width 200px renseigné. L'utilisation d'un float serait donc tout à fait appropriée (ne serait-ce que pour éviter la configuration du bug des 3px sur IE6-).