[css]colonnes contiguës de hauteur différentes

**spirou** · 11/08/2005, 21h17

bonsoir,

J'aurais besoin d'un p'tit coup de main...
Je suis en train de faire une mise en page en css, et un problème que je n'arrive pas à résoudre commence à me faire perdre patience, en clair j'en peux plus...

J'ai trois colonnes et je voudrais que celles-ci soient égales en hauteur à celle de la plus grande, ce qui est en partie résolu.
Mon problème est que lorsque je mets du contenu dans mes colonnes 1 & 2, tout se décale en hauteur.
Mais cela ne le fait pas dans la colonne 3, d'où mon incompréhension...

Je vous montre mon code :

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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-image: url(body2.jpg);
}
 
.conteneur{
      width: 800px;
      height: auto;
      left: 50%;
      margin-left: -400px;
      margin-top: 20px;
      margin-bottom: 20px;   /* ceci n'est pas pris en compte, pourquoi ??? */
      padding: 0;
      border-left: 2px solid #00008b;
      border-right: 2px solid #00008b;
      position: absolute;
}
 
.bloc1{
      width: 800px;
      height: 10px;
      background-color: #708090;
      border-top: 2px solid #fff8dc;
      border-bottom: 2px solid #fff8dc;
      margin-top: 0;
      margin-left: 0;
      position: relative;
}
 
.bloc2{
      width: 800px;
      height: 130px;
      background-image: url(16.jpg);
      margin-top: 0;
      margin-left: 0;
      position: relative;
}
 
.bloc3{         /* colonne 1 */
      width: 150px;
      height: auto;
      background-color: #ffffdd;
      margin-top: 0;
      margin-left: 0;
      position: relative;
}
 
.bloc4{       /* colonne 2 */
      width: 150px;
      height: auto;
      background-color: #ffffed;
      margin-top: 0;
      margin-left: 150px;
      margin-top: 0;
      border-left: 1px solid #00008b;
      position: relative;
}
 
.bloc5{       /* colonne 3 */
      width: 498px;
      height: auto;
      background-color: #ffffff;
      margin-left: 150px;
      margin-top: 0;
      border-left: 1px solid #00008b;
      position: relative;
}
 
.bloc6{
      width: 800px;     /* pied de page */
      height: 60px;
      background-color: #708090;
      border-top: 2px solid #00008b;
      border-bottom: 2px solid #00008b;
      position: relative;
}

Le html :

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
<body>
 
    <div class="conteneur">
 
      <div class="bloc1"></div>
 
      <div class="bloc2"></div>
 
      <div class="bloc1"></div>
 
      <div class="bloc3">
 
      <div class="bloc4">
 
      <div class="bloc5">
 
      </div></div></div>
 
      <div class="bloc6"></div>
 
    </div>
 
  </body>

Je travaille avec des positions relatives, car sinon, je n'arrive pas à mettre mon pied de page en bas et mes hauteur de colonnes qui s'adaptent à celle de la plus grande.

Un autre problème aussi je voudrais mettre une marge en bas de mon conteneur, mais celle-ci demeure toujours inexistante.....

Si vous avez une solution à ce problème de mise en page qui pourrait être simple, mais qui se révèle à mes yeux une énigme totale, je suis preneur

**v4np13** · 12/08/2005, 08h35

Bonjour,

essaye en passant tes 3 colonnes en position absolute.

Pour le pied de page si tu veux qu'il reste en bas, mets clear: both;

Pour la marge du conteneur, essaye en remplacant margin-bottom par padding-bottom

**spirou** · 12/08/2005, 15h08

Merci, j'ai suivi tes conseils de les mettre en position absolue et en faisant une petite recherche, je me suis inspiré de cette page.

Tout le code que j'ai fait fonctionne avec IE et Firefox, mais le problème de marge inférieure est presque résolue, cependant il y a encore un truc qui pour pouvoir l'effectuer me dépasse.

Il s'agit des bordures, IE les inclus dans la largeur de mon div(je pense qu'il a raison), tandis que Firefox, lui les ajoute en plus de la largeur, ce qui provoque un décalage suivant les largeurs définies, comment faire pour que l'un ou l'autre puisse afficher les largeurs à l'identique ?

Je remets le code que j'ai modifié :
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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-image: url(body2.jpg);
}
 
.conteneurGlobal{         /* contient tout les elements de la page */
      width: 800px;
      height: auto;
      left: 50%;
      top: 10px;
      margin-left: -400px;
      border-left: 2px solid #00008b;
      border-right: 2px solid #00008b;
      padding: 0; /* en mettant un paddind-bottom, il sera entouré des bordures left & right 
                    ce qui m'oblige à les enlever pour ensuite les mettre sur chaque div */
      position: absolute;
}
 
.bloc1{
      width: 800px;
      height: 10px;
      background-color: #708090;
      border-top: 2px solid #fff8dc;
      border-bottom: 2px solid #fff8dc;
      margin-top: 0;
      margin-left: 0;
      position: relative;
}
 
.bloc2{
      width: 800px;
      height: 130px;
      background-image: url(accueil.jpg);
      margin-top: 0;
      margin-left: 0;
      position: relative;
}
 
.conteneurColonnes{     /* contient toutes les colonnes */
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border-top: 2px solid #00008b;
      position: relative;
}
 
.colonne1{         
      width: 150px;
      height: 100%;
      background-color: #ffffdd;
      margin: 0;
      left: 0;
      padding: 0;
      position: absolute;
}
 
.colonne2{          /* j'ai des problèmes ici IE m'inclus les bordures dans la largeur, alors que
                      firefox me les compte en plus de la largeur, en resulte un decalage */
      width: 150px;    
      height: 100%;
      background-color: #ffffed;
      border-left: 1px solid #00008b;
      border-right: 1px solid #00008b;
      margin: 0;
      left: 150px;
      padding: 0;
      position: absolute;
}
 
.colonne3{            /* colonne dont la hauteur est la reference pour les 2 autres */
      width: 500px;
      height: auto;
      background-color: #ffffff;
      margin: 0 0 0 300px;
      padding: 0;
}
 
.foot{              /* pied de page */
      width: 800px;     
      height: 60px;
      background-color: #708090;
      border-top: 2px solid #00008b;
      border-bottom: 2px solid #00008b;
      position: relative;
}

Le html :

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
<body>
 
    <div class="conteneurGlobal">
 
      <div class="bloc1"></div>
 
      <div class="bloc2"></div>
 
      <div class="bloc1"></div>
 
      <div class="conteneurColonnes">
 
        <div class="colonne1">
        </div>
 
        <div class="colonne2">
        </div>
 
        <div class="colonne3">
        </div>
 
      </div>
 
      <div class="foot">
      </div>
 
    </div>
 
  </body>

Une petite

?

**spirou** · 12/08/2005, 18h45

Bon, j'ai disons réussi en essayant un tas de combinaisons possibles ce que je voulais faire.

Mais j'aimerais bien que quelqu'un puisse m'expliquer, car je n'ai rien compris....

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
.conteneurColonnes{     /* contient toutes les colonnes */
      margin: 0;
      padding: 0;
      width: 800px;
      height: 100%;
      border-top: 2px solid #00008b;
      position: relative;
}
 
.colonne1{         
      width: 150px;   
      height: 100%;
      background-color: #ffffdd;
      left: 0;
      position: absolute;
}
 
.colonne2{          
      width: 250px;    
      height: 100%;
      background-color: #ffffed;
      border-left: 1px dotted black;
      left: 150px;
      position: absolute;
}
 
.colonne3{            /* colonne dont la hauteur est la reference pour les 2 autres */
      width: 400px;     
      height: auto;
      background-color: #ffffff;
      border-left: 1px dotted black;
      left: 399px;   /* ajuste pour firefox, pourquoi 399 ? mystere... */
      position: relative;
      overflow: hidden;  /* pour que IE ne deborde pas le background sur la droite */
}                          /* rien trouve d'autre pour avoir le meme affichage */

Si quelqu'un comprends ce que j'ai fait, ce serait sympa de m'expliquer le pourquoi de ce 399px, car lorsque je veux respecter cette logique qui pourrait en être une, en mettant left: 149px; dans ma colonne2, cela ne fonctionne plus.... ????

Merci.

**spirou** · 16/08/2005, 21h16

S'il vous plait, quelqu'un pourrait-il m'expliquer pourquoi lorsque j'ai un div par exemple de 200*200 avec une bordure de 2px, IE m'inclus la bordure dans la largeur et la hauteur de ce div, et firefox lui la rajoute ce qui fait que mon div mesure alors 204*204.

Je ne comprends pas comment faire...

Cela nuit à mes mises en pages.

**spirou** · 18/08/2005, 07h48

On m'a donné la solution.

Cela venait du fait que je mettais transitional dans le doctype de ma page html.

Enfin je suis content depuis le temps que je cherchais la cause de ces différences, je vais enfin pouvoir partir avec de meilleures bases.

IE

:uc:

[css]colonnes contiguës de hauteur différentes

Dimensionnement en CSS

Discussions similaires

Partager

Partager