Colonnes de même hauteur avec bordures : possible sans tableau ?

**EnidGwa** · 15/10/2007, 18h07

Bonjour,

J'ai fait un design suivant basé sur des tableaux, et j'aurais voulu n'utiliser que des DIV. Seulement ça fait des heures que je galère

Le résultat voulu est dans la pièce jointe au message (et je veux avoir les bordures dans mon design).
Edit: Voici l'image contenue dans la pièce jointe.

Voici le code qui utilise des tableaux :

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style>
<!--
* {
	margin: 0;
	padding: 0;
	text-align: center;
}
table#container {
	width: 750px;
  border-collapse: collapse;
}
#topzone {
  border: 1px solid black;
}
#logo {
  border: 1px solid black;
  margin-top: 5px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
table#middlezone {
  width: 100%;
  border-collapse: collapse;
}
table#middlezone td {
  vertical-align: top;
}
table#middlezone .middlezone_spacer {
  width: 5px;
}
#leftzone {
  border: 1px solid black;
}
#centralzone {
	width: 100%;
  border: 1px solid black;
	padding: 2px;
}
#rightzone {
  border: 1px solid black;
}
#footer {
  border: 1px solid black;
	margin-top: 5px;
}
-->
</style>
</head>
 
<body>
 
<table id="container">
	<tr>
    <td>
    	<div id="topzone">
        HAUT DE PAGE
    	</div>
    </td>
  </tr>
 
	<tr>
    <td>
      <div id="logo">
        IMAGE LOGO
      </div>
	  </td>
  </tr>
 
	<tr>
    <td>
      <table id="middlezone">
        <tr>
    			<td id="leftzone">
            <p>COLONNE GAUCHE</p>
          </td>
 
    			<td class="middlezone_spacer">&nbsp;</td>
 
    			<td id="centralzone">
             <p>COLONNE CENTRE</p>
             <p>COLONNE CENTRE</p>
             <p>COLONNE CENTRE</p>
          </td>
 
    			<td class="middlezone_spacer">&nbsp;</td>
 
    			<td id="rightzone">
             <p>COLONNE DROITE</p>
             <p>COLONNE DROITE</p>
          </td>
        </tr>
      </table>
	  </td>
 	</tr>
 
	<tr>
    <td>
    	<div id="footer" >
	      BAS DE PAGE
    	</div>
	  </td>
  </tr>
</table>
 
</body>
 
</html>

Voici ma trame de base sans tableau :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style>
<!--
* {
	margin: 0;
	padding: 0;
	text-align: center;
}
#container {
	width: 750px;
	padding: 2px;
}
#topzone {
  width: 100%;
  border: 1px solid black;
}
#logo {
  width: 100%;
  border: 1px solid black;
  margin-top: 5px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#leftzone {
  float: left;
  width: 180px;
	border: 1px solid black;
}
#rightzone {
  float: right;
  width: 180px;
	border: 1px solid black;
}
#centralzone {
	border: 1px solid black;
  margin-left: 185px;
  margin-right: 185px;
}
#footer {
  clear: both;
  width: 100%;
  border: 1px solid black;
	margin-top: 5px;
}
-->
</style>
</head>
 
<body>
 
<div id="container">
	<div id="topzone">
    HAUT DE PAGE
	</div>
 
  <div id="logo">
    IMAGE LOGO
  </div>
 
 	<div id="leftzone">
   <p>COLONNE GAUCHE</p>
  </div>
	<div id="rightzone">
   <p>COLONNE DROITE</p>
   <p>COLONNE DROITE</p>
  </div>
	<div id="centralzone">
   <p>COLONNE CENTRE</p>
   <p>COLONNE CENTRE</p>
   <p>COLONNE CENTRE</p>
  </div>
 
	<div id="footer" >
	  BAS DE PAGE
	</div>
</div>
 
</body>
</html>

Merci d'avance de votre aide !!!

**Candygirl** · 17/10/2007, 15h18

Hello,

ce type de montage pose problème en css, à l'heure actuelle, si on souhaite faire vraiment des éléments de même hauteur.

En général, on contourne le problème en jouant avec une image de fond qui se répète en y sur le conteneur et qui affiche à elle seule toutes les borudres, donnant l'illusion que les 3 "colonnes" sont de même hauteur quand bien même ce n'est pas le cas.

Colonnes de même hauteur avec bordures : possible sans tableau ?

Dimensionnement en CSS

Discussions similaires

Partager

Partager