Discussion :

[Abou Zar]

Bonjour
J'ai un problème avec ma troisieme colonne de ma page d'acceuil (la colonne de droite).
Malgré que j'ai mis les 3 colonnes dans le meme div, pour que mes 3 colonnes aient la meme hauteur, la troisieme colonne (droite) n'a pas pris la meme hauteur que les 2 qui la precedent. Elle s'est positionné un peu au milieu du div (page) qui les contient. Or j'ai fait de sorte que les colonnes aient la meme hauteur que le div contenant en mettant margin-top à 0.

J'ai essayé en vain plusieurs solutions pour que la troisieme colonne ait la meme hauteur que les deux precedente; mais j'ai pas reussi.
Merci bien de votre aide!
Voici le code html

Code html :

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
 <div id="page"> <!-- contient les 3 colonnes de la page d'acceuil du site-->
 
   <div id="gauche">
 
  </div>
 
  <div id="centre">
 
	  </div><!-- centre-->
 
  <div id="droit">  
 
  </div><!-- droit -->
 
 
 
 </div><!-- page-->

Voici le 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
#page
{
	position: relative;
	text-align: left; 
	margin: 3em auto; 
	padding: 0;
 
	width: 95%;
	max-width: 95% ;
	min-width: 95% ;
	border:solid #FF00FF;
	background: #FF00FF;
 
 
}
 
// menu de gauche
#gauche		 {
	position: absolute;
 
	margin-top:0%;
 
	left: 0px;
	width: 23%;
 
	padding: 0 0 1em 0;
 
}
 
// menu du centre
#centre
{ 
 
 
	width:59%;
	min-width:59%;
	max-width:59%;
	position: static;
	border: solid 1px #DEDEDE;
		margin: 0% 0% 0% 19%;
 
padding: 2% 1% 4%;
	background: white;
	z-index: 20;
	overflow: hidden;
 
	-moz-border-radius: 25px;
	border-color: #0000FF;
 
 
}
 
//menu de droite
#droit
{
 
float: right;
position: absolute;
margin-top:0%;
	padding: 0;
	width: 19%;
 
 
}

Merci bien de m'aider!

[Muchos]

Bonjour !

Une première chose : pensez à la coloration syntaxique pour vos codes (en faisant [CODE=css], [CODE=html], etc.)

Pour votre problème, vous dites que le haut de la div#droit n'est pas au même niveau que celui des autres div. Au lieu d'utiliser position: absolute sur les trois div, pourquoi ne pas utiliser float ?

[Abou Zar]

Merci bien de votre reponse!

Je l'ai testée mais pas de changement.

[NoSmoking]

Bonsoir,

Code :

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

1
2
3
4
5
6
7
8
// menu de gauche
#gauche		 {
	position: absolute;
	margin-top:0%;
	left: 0px;
	width: 23%;
	padding: 0 0 1em 0;
}

les commentaires s'écrivent /* menu gauche */, cela devrait permettre l'interprétation du CSS

[Schim59]

Il existe une technique partiellement compatible :
column-width :
column-gap :
column-rule :

En ccs3.
Je ne l'ai pas encore testée.

[Erwan31]

Il existe une technique partiellement compatible :
column-width :
column-gap :
column-rule :

En ccs3.
Je ne l'ai pas encore testée.

Bonjour,
ce n'est pas adapté à ce qu'il cherche à faire et ce n'est pas implémenté sur IE9-, mieux vaut éviter. Pour ce qui est de CSS3, il faudra attendre l'implémentation plus large du flexible box layout module et du grid layout module...

@Abou Zar

Un peu tordu comme méthode de positionnement, surtout lorsque tu mélange flottants et élément positionnés.

Je te déconseille fortement de n'utiliser le positionnement: absolu (retiré du flux normal) au profil de 3 autres méthodes : les flottants (float:left/right, diplay:table-cell pour avoir des colonne de même hauteur (mais pas implémenté sur IE7-) ou display:inline-block)

NB: déclarer position:static ne sert à rien puisque static est la valeur par defaut de cette propriété.