Alignement de div

**niasm** · 12/06/2014, 14h13

Bonjour,
je me retrouve avec un problème bizarre, j'ai plusieurs <div> que je veut aligner 2 par 2. Je les ai mis en inline-block avec une largeur de 45% et aucun problème. Mais dés que je met du texte dans l'un d'eux l'alignement est rompus.

sans text	avec text

mon 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
26
27
28
29
30
<!DOCTYPE html>
<html> 
	<head>
		<link rel="stylesheet" href="test.css" />
    </head>
    <body>
		<section>
			<div id="conteneurgeneral">
				<div class="conteneur" class="color2">
					<p><a href="#">1</a></p>
				</div>
				<div class="conteneur" class="color1">
					<p><a href="#"></a></p>
				</div>
				<div class="conteneur">
					<p><a href="#"></a></p>
				</div>
				<div class="conteneur" class="color2">
					<p><a href="#"></a></p>
				</div>
					<div class="conteneur" class="color1">
				<p><a href="#"></a></p>
				</div>
				<div class="conteneur">
					<p><a href="#"></a></p>
				</div>
			</div>
		</section>
    </body>
</html>

mon css:

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
html, body, section{
  height: 100%;
}
 
#conteneurgeneral{
text-align: center;
	width: 100%;
}
 
.conteneur{
	display: inline-block;
	width: 45%;
	min-width: 300px;
	height: 90px;
 
	margin-right: 4%;
	margin-bottom: 4%;
 
	background-color: red;
}

est ce que quelqu’un sait d'où vient le problème svp?

**Micmaya** · 12/06/2014, 16h13

Bonjour,
Essaie un peu avec ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#conteneurgeneral {
	position: relative;
	top: 0;
	width: 100%;
	margin: 0 auto; /*Juste pour centrer au milieu de la page, mais avec un width à 100% pas sûr que ça fonctionne */
	display: table;
}
.conteneur {
	display: table-cell;
	width: 45%;
}