Bloc qui dépasse

**thierryler** · 29/09/2014, 09h14

Bonjour à tous,

J'ai un petit soucis de bloc qui ne s'adapte pas à son contenu. Pouvez-vous m'aider ?

Au niveau du html, j'ai la structure suivante (fichier en pièce jointe) :

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
26
27
28
29
<body id="body">
	<div id="container">
		<div id="header">
			header
		</div>
 
		<div id="principal">
			principal
 
			<div class="row">
				<div class="col-6 bloc-A">
					AAA AAA<br/>
					AAA AAA<br/>
					AAA AAA<br/>
					AAA AAA<br/>
					AAA
				</div>
				<div class="col-6 bloc-B">
					BBB
				</div>
			</div>
 
		</div>
 
		<div id="footer">
			footer
		</div>
	</div>
</body>

Pour 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#body {
	background: black;
}
#container {
	width: 800px;
	margin-left: -400px;
	left: 50%;
	position: absolute;
	background: white;
}
#header {
	background: yellow;
	padding: 10px;
}
#principal {
	background: aqua;
	padding: 10px;
}
#footer {
	background: orange;
	padding: 10px;
}
div.row {
	display: block;
}
div.col-6 {
	width: 40%;
	display: block;
	float: left;
}
div.bloc-A {
	margin-right: 5px;
	background: red;
}
div.bloc-B {
	margin-left: 5px;
	background: blue;
}

Comme on le voit (cf. capture), les blocs "AAA" (en rouge) et "BBB" (en bleu), qui font partie du bloc "principal" (en aqua) dépassent du bloc. Ou plutôt, c'est le bloc "principal" qui ne s'adapte pas à son contenu.

Que dois-je faire ?

Merci d'avance.
Thierry

**black-hawk-down** · 29/09/2014, 11h47

Salut,

Tu ne dois plus utiliser des flottants si tu ne veux plus ce comportement. Pour rappel, float fait sortir l'élément du flux, donc le parent ne s'adapte plus en fonction de ses enfants.

Soit tu utilises des display: inline-block, soit des display: table-cell, soit tu utilises le flexible layout (mais sa compatibilité reste très limitée).

Quelle compatibilité de navigateur tu souhaites assurer ?

**thierryler** · 29/09/2014, 11h53

Idéalement, je voudrais les navigateurs récents (disons 2 ans).

**black-hawk-down** · 29/09/2014, 12h00

Le plus simple serait alors de partir sur un display: table-cell en lieu et place des float: left|right à mon avis.

**thierryler** · 29/09/2014, 12h04

Bon je vais abuser un peu. Tu pourrais me donner un exemple de code pour mon cas ?

Invité · 29/09/2014, 12h29

"Ca dépend, ça dépasse !"

**thierryler** · 29/09/2014, 13h26

En utilisant le style suivant, ça prend bien la bonne taille. Mais mes blocs (rouge et bleu) sont maintenant collés, et la ligne n'occupe plus 100% de l'espace dispo :-(

Code :

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

1
2
3
4
5
6
7
8
9
 
div.row {
 
}
 
div.col-6 {
	width: 40%;
	display: table-cell;
}

**black-hawk-down** · 29/09/2014, 13h30

Voila : http://jsfiddle.net/q82dmayd/

Code css :

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
#body {
	background: black;
}
 
#container {
	width: 800px;
	margin-left: -400px;
	left: 50%;
	position: absolute;
	background: white;
}
 
#header {
	background: yellow;
	padding: 10px;
}
 
#principal {
	background: aqua;
	padding: 10px;
	display: table;
    width: 100%;
    box-sizing: border-box;
}
 
#footer {
	background: orange;
	padding: 10px;
}
 
div.row {
	display: table-row;
}
 
div.col-6 {
	width: 50%;
	display: table-cell;
}
 
div.bloc-A {
	margin-right: 5px;
	background: red;
}
div.bloc-B {
	margin-left: 5px;
	background: blue;
}

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
26
27
28
29
<body id="body">
	<div id="container">
		<div id="header">
			header
		</div>
 
		<div id="principal">
			principal
 
			<div class="row">
				<div class="col-6 bloc-A">
					AAA AAA<br/>
					AAA AAA<br/>
					AAA AAA<br/>
					AAA AAA<br/>
					AAA
				</div>
				<div class="col-6 bloc-B">
					BBB
				</div>
			</div>
 
		</div>
 
		<div id="footer">
			footer
		</div>
	</div>
</body>

**thierryler** · 29/09/2014, 13h35

Magnifique. Merci.

Je n'ai plus qu'à gérer l'espace entre les colonnes et je serai bon. Mais je crois que j'ai toutes les billes en main pour y arriver.

Merci à tous

**black-hawk-down** · 29/09/2014, 13h37

Pour gérer l'espace entre colonne tu as border-collapse et border-spacing qui sont prévues pour ça.

**thierryler** · 30/09/2014, 08h57

Tout fonctionne.

Merci à tous.

Bloc qui dépasse

CSS

Discussions similaires

Partager

Partager