Aligner des div en mode table-cell (mais sans js ?)
Bonjour,
J'essaye diverses solutions pour aligner 3 div à l'intérieur d'une autre, en occupant (si possible) toute la place, ou a minima en respectant un positionnement gauche-milieu-droite. Le centrage vertical est un autre problème "en soit", là il s'agit juste de la répartition de ces divs.
J'ai une div englobante (boite_ext) qui sera positionné quelque part par quelqu'un. Dedans, je place une div intérieure qui sera "mon" environnement/périmètre de travail (boite_int). Dans "ma" div, je dois en placer 3, typiquement avec un alignement gauche-milieu-droite.
Dans ce cas précis, je tente d'utiliser des display:table-cell (on peut aussi utiliser, table, translate, flex… ok, mais là je dois me pencher sur le cas "table-cell").
Le html :
Code:
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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="test_2.css">
<Title>Tests #2</title>
</head>
<body>
<main role="main">
<div class="boite_ext">
<div class="boite_int">
<div class="gauche">
gauche
</div>
<div class="milieu">
milieu<br>bla bli bla bli bla bli
</div>
<div class="droite">
droite
</div>
</div>
</div>
</main>
</body>
</html> |
Le css :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .boite_ext {
border: 2px solid blue;
max-width: 40%;
padding: 10px;
}
.boite_int {
margin: 10px auto;
border: 2px solid red;
padding: 10px;
/*
width: 100%;
display: table;
*/
}
.boite_int div {
border: 2px solid;
display: table-cell;
vertical-align: middle;
text-align: center;
} |
Le gag/problème se situe avec les deux lignes que j'ai laissées en commentaire. Ma boite_int prend correctement toute la place dans la boite_ext. Si j'active le display:table, ma boite_int se colle aux trois div internes. Mais si j'active lewidth:100%, la boite_int fait bien 100% de la taille parente, mais se décale horizontalement vers la droite en additionnant les margin et padding.
Ai-je loupé un truc pour que le tout se mette correctement (avec les table / table-cell) ? Ou faut-il vraiment dans ce cas calculer avant ou par js (js que je dois éviter) ?
Merci pour l'éclairage…
p.s. : si quelqu'un peut me rappeler comment placer quelques mots de code en cours de texte du message…
