Discussion :

[arnaudperfect]

Bonjour,

J'ai une div principal (container) qui contient trois div : gauche, centre, droite, aligné sur la même ligne.

Le div de gauche et droite contienne une image en background.
Le div de centre contient le contenu de mes pages web.

schéma de mes div :

-----------------------
|.........|.........|........|
|gauche|centre|droite|
|.........|.........|........|
-----------------------

Pour la div du centre, ca hauteur s'adapte suivant son contenu.

J'aimerai que pour les div gauche et droite, qu'elles adaptent leurs hauteurs suivant la hauteur de la div du centre.

Pour cela j'ai essayé plusieurs choses dont :

- Mettre une hauteur de 100% pour les div de gauche et droite > ne fonctionne pas.

J'ajoute une hauteur en px à la div principal (container), cela fonctionne sauf que si le contenu de la div du centre est très grande, ma mise en page est explosé.

Voici le code XHTML :

Code :

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

1
2
3
4
5
<div class="container">
  <div class="bodyGauche"></div>
  <div class="bodyCentre"><p>CENTRE<br />CENTRE<br />CENTRE</p></div>
  <div class="bodyDroite"></div>
</div>

Et la CSS associé :

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
.container {
MARGIN:0;
PADDING:0;
TEXT-ALIGN:center;
WIDTH:635px;
}
 
.bodyGauche {
BACKGROUND-IMAGE:url("../image/sono_01.jpg");
BACKGROUND-REPEAT:repeat-y;
FLOAT:left;
HEIGHT:100%;
WIDTH:13px;
}
 
.bodyCentre {
BACKGROUND-COLOR:#282828;
FLOAT:left;
WIDTH:609px;
}
 
.bodyDroite {
BACKGROUND-IMAGE:url("../image/sono_03.jpg");
BACKGROUND-REPEAT:repeat-y;
FLOAT:right;
HEIGHT:100%;
WIDTH:13px;
}

schéma de mes div actuellement :

----------------------
|..........|........|.......|
|gauche|centre|droite|
|-------|........|------|
...........|........|
...........-------

Si vous avez une solution, merci d'avance.

Arnaud

[Palca]

Ce que tu peux faire c'est ajouter un overflow à ton div central, comme ça il ajoutera une barre de défilement si le contenu dépasse la taille voulue mais ne dépassera pas la hauteur que tu lui imposes.

Code :

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

1
2
3
4
.tonDiv {
overflow: auto;
...
}

[arnaudperfect]

oui mais c'est pas terrible.

Avant j'étais sous un tableau et cela fonctionnais nickel, mais avec des div, je n'arrive pas à faire les même comportement.

[Candygirl]

[...]avec des div, je n'arrive pas à faire les même comportement.

C'est parce que tu restes dans une logique de montage en tableaux .

Le plus simple, dans ton cas, vu que ton bodycentre est de largeur fixe, est de réunir tes 2 bords en 1 seule image que tu appliqueras directement à ton bodycentre. Tes 2 divs bodygauche et droite sont inutiles et à supprimer:

Code css :

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

1
2
3
4
5
6
.bodyCentre {
  background:#282828 url(sono1et3.png) repeat-y;
  float:left;
  width:609px;
  padding:0 13px; /* que ton contenu ne vienne pas sur tes bordure */
}

Edit: S'il s'agit bien du site dans ta signature, même pas besoin d'image; un simple border fera l'affaire:

Code css :

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

1
2
3
4
5
6
7
.bodyCentre {
  background:#282828;
  float:left;
  width:609px;
  padding:0 10px;
  border:3px solid #6c6c6c;
}

[arnaudperfect]

ok, la solution du

dit: S'il s'agit bien du site dans ta signature, même pas besoin d'image; un simple border fera l'affaire:
Code css :

.bodyCentre {
background:#282828;
float:left;
width:609px;
padding:0 10px;
border:3px solid #6c6c6c;
}

est pas mal, mais pour faire des coins arondi, c'est possible ?

[arnaudperfect]

'est parce que tu restes dans une logique de montage en tableaux .

Le plus simple, dans ton cas, vu que ton bodycentre est de largeur fixe, est de réunir tes 2 bords en 1 seule image que tu appliqueras directement à ton bodycentre. Tes 2 divs bodygauche et droite sont inutiles et à supprimer:

Code css :

.bodyCentre {
background:#282828 url(sono1et3.png) repeat-y;
float:left;
width:609px;
padding:0 13px; /* que ton contenu ne vienne pas sur tes bordure */
}

je suis d'accord pour cela, j'y avais pensé, mais imagine que dans mes deux bord, j'ai en faite deux menu avec un font. si le centre fais quelque ligne, ca ferai moche si les background des menu ce stop à la fin des menu...