Aligner des div en mode table-cell (mais sans js ?)

**Stellar7** · 14/06/2018, 09h28

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 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
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 :

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
.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…

Invité · 14/06/2018, 09h42

Bonjour,

1- dé-commente les 2 lignes, et ajoute :

Code :

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

div { box-sizing:border-box; }

box-sizing

2-

...comment placer quelques mots de code en cours de texte du message…

No comprendo...

**Stellar7** · 14/06/2018, 10h25

1) Effectivement, j'avais loupé le box-sizing. Merci pour le rappel et le lien.

2) Je me suis mal exprimé : p.ex. en cours de message sur la ligne précédente, le "box-sizing" peut apparaître en "format code" sans être mis dans un insert passé à la ligne.