Bonjour à tous,

Je suis nouveau en HTML & CSS, j'ai essayé de trouver une réponse à mon(mes) problèmes mais mes lacunes en vocabulaire ne m'ont pas permis de formuler correctement ma demande.. et donc de trouver une réponse.

Voilà mon problème, j'aimerais crée 4 bloc qui occupe 100% de la longeur d'une page, cependant lorsque je code la ligne, l'ensemble de la ligne fait 100% de la largeur de la page, chacun des 4 éléments 25%. Cependant il y a un petit espace entre chaque bloc ce qui fait que les 4 elements s’étendent sur 2 lignes ..

Mon:
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML>
<html>
 
<head>
<meta charset="UFT-8">
<title>Liste d'accès aux différentes leçons !</title>
 
<link rel="stylesheet" href="css/styles.css" />
 
</head>
 
<body>
<div id="conteneur">
 
	<div class="Intro" >
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne entete">
		<div class="bloc">
		</div>
		<div class="slider">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
	<div class="ligne">
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
		<div class="bloc">
		</div>
	</div>
 
</div>
</body>
 
</html>

Mon:
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
body,html{height:100%;
width:100%;}
 
#conteneur{
width: 100%;
height: 100%;
margin : 0px;
padding : 0px;
border: 1px solid red;
background-color: hsl(0, 100%, 50%,0.2);
position: relative;
}
 
body,.bloc,.slider{ 
margin:0px;
padding:0px; 
}
 
.bloc{
	display : inline-block;
	width: 25%;
	border : 1px solid green;
	background-color: hsl(150, 100%, 50%,0.2);
	height: 300px;
}
 
.slider{
	display : inline-block;
	border : 1px solid blue;
	width:75%;
	background-color: hsl(250, 100%, 50%,0.2);
	height: 300px;
}



Aussi j'avais une seconde question, je débute dans le développement web (non professionnel juste par loisir) je comprends approximativement HTML CSS3 et Java, serait il possible de me diriger vers un post où il est expliqué comment avoir une hauteur variable pour mes blocs(div). Je souhaiterais en effet avoir 4 carrés identiques qui remplisse une ligne !

Merci beaucoup,

Je vous remercie d'avance,

Cordialement,

PS : j'ai lu un commentaire du type: "J'ai mis un Overflow:auto; sur ma div .center "