Discussion :

[Anduriel]

Salut,

Je souhaite faire 3 colonnes avec des div. J'ai lu un tuto qui expliquait comment le faire (cf http://batraciens.net/css-astuces/3-...aptables-1.htm)
Le problème c'est que mes div de droites et de gauche ne restent pas dans le bloc conteneur mais se fixe à 0px du bord de la page Pour comprendre voir les images.
Voila le code:

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
#putCenter {
   width: 620px;
   margin-left: auto;
   margin-right: auto;
   background: green;
}
#divLeftShadow {
   position: absolute;
   left: 0px;
   width: 10px;
   height: 10px;
   background: red;
   /*background-image: url(images/left.jpg);
   background-repeat: repeat-y;*/
}
#divRightShadow {
   position: absolute;
   right: 0px;
   width: 10px;
   height: 10px;
   background: red;
   /*background-image: url(images/right.jpg);
   background-repeat: repeat-y;*/
}
#divCenter {
   margin: 0 20px 0 20px;
   padding: 1px;
   background-color: white;
}

et HTML

Code :

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

1
2
3
4
5
6
7
8
9
<div id="putCenter">
   <div id="divLeftShadow"><img src="images/left.jpg" alt="" /></div>
   <div id="divRightShadow"><img src="images/right.jpg" alt="" /></div>
   <div id="divCenter">
 
      Test écriture
 
   </div>
</div>

Ou est le problème?
Merci

[Kerod]

Et si tu mettais comme ceci ?

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
#putCenter {
   width: 620px;
   margin-left: auto;
   margin-right: auto;
   background: green;
}
#divLeftShadow {
   left: 0;
   width: 10px;
   height: 10px;
   float: left;
   background: red;
   /*background-image: url(images/left.jpg);
   background-repeat: repeat-y;*/
}
#divRightShadow {
   float:right;
   right: 0px;
   width: 10px;
   height: 10px;
   background: red;
   /*background-image: url(images/right.jpg);
   background-repeat: repeat-y;*/
}
#divCenter {
   margin: 0 20px 0 20px;
   padding: 1px;
   background-color: white;
}

[Anduriel]

Bien joué !
J'ai pensé à les mettre mais je croyais que float passait "par dessus" le div et ne s'y insérait pas...
Merci

[Kerod]

Effectivement ca passait par dessus à cause de leur position absolute. Mais si tu mets pas de position c'est directement dans le conteneur qu'ils sont repositionnés