Aligner horizontalement 4 blocs div

**WalidNat** · 27/11/2008, 11h57

Bonjour,

j'ai un petit problème: je voudrais aligner 4 div d'une largeur de 25% dans une plus grande div.
Sur IE cela se passe sans problème, mais sur les autres navigateurs (Firefox, Opera, Safari testés), ma premiere div se place a 50% de son parent.
Le plus troublant est que dans mon code, j'ai aligné plusieurs fois 2 div et ce sans aucun problème.
Voici le code HTML:

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
<div id="espaces">
				<div class="page">
					<div id="espaceparents" class="box">
						<h3>Espace Parents d'élèves</h3>
						<ul>
							<li><a href="#">suivi de votre enfant</a></li>
							<li><a href="#">Association de parents</a></li>
							<li><a href="#">Ressources</a></li>
						</ul>
					</div>
					<div id="espaceprofs" class="box">
						<h3>Espace Enseignant</h3>
						<ul>
							<li><a href="#">Pronote</a></li>
							<li><a href="#">Association de parents</a></li>
							<li><a href="#">Ressources</a></li>
						</ul>
					</div>
					<div id="college1" class="box">
						<h3>Espace Enseignant</h3>
						<ul>
							<li><a href="#">Pronote</a></li>
							<li><a href="#">Association de parents</a></li>
							<li><a href="#">Ressources</a></li>
						</ul>
					</div>
					<div id="college2" class="box">
						<h3>Espace Enseignant</h3>
						<ul>
							<li><a href="#">Pronote</a></li>
							<li><a href="#">Association de parents</a></li>
							<li><a href="#">Ressources</a></li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
			</div>

et la css qui va avec :

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
39
40
41
42
43
44
45
46
.page {
	width:990px;
	margin-left:auto;
	margin-right:auto;
}	
	#espaces {
		width:100%;
		padding-bottom:30px;
		background-color:#FFFFFF;
	}
		.box {
			width:25%;
			float:left;
		}
		.box a {
			font-size:0.8em;
			color:#0f217b;
		}
		.box a:hover {
			text-decoration:none;
		}
		.box h3 {
			margin:0;
			padding-top:10%;
			padding-left:16%;
			font-size:0.8em;
		}
		.box ul {
			list-style:none;
		}
		#espaceparents {
			left:0px;
			background-color:yellow;
		}
		#espaceparents ul {
			border-right:1px solid #E7E6E6; /* Ce border n'a pas d'incidence sur l'alignement, seul la 4ème div passera a la ligne faute de place */
		}
		#espaceprofs {
			background-color:grey;
		}
		#college1 {
			background-color:blue;
		}
		#college2 {
			background-color:green;
		}

Si vous avez une idée, je vous serait très reconnaissant de m'en faire part parce que là, je ne sais pas du tout a koi c du ...

**c_s_s** · 27/11/2008, 12h09

Bonjour,

Il n'y a aucun probleme sous firefox, opera ou safari avec le code que tu donnes.

Le probleme doit venir d'ailleurs dans ton code.

Tu as une page en ligne, ou le code HTML/CSS complet ?

**Erwan31** · 27/11/2008, 13h49

En effet sans la totalité du code...
Un petite remarque sinon: au lieu d'ajouter un div vide de dégagement (doté du clear:left) tu peux attibuer un overflow:hidden à .page pour qu'il englobe ses enfants flottant
et attribuer un clear:left sur le block qui suit le bloc .page s'il y a.

**GihefBey** · 27/11/2008, 14h29

Bonjour,

Dans la mesure où tu utilises des dimensions en px, les % ne sont pas vraiment utiles.

Code css :

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

1
2
3
4
5
6
7
 
.box h3 {
  margin:0;
  padding-top:10%;  /* ??? */
  padding-left:16%;  /* ??? */
  font-size:0.8em;
  }

Essaye

Code css :

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

1
2
3
4
5
6
7
8
9
10
 
.page {
  width: 988px;  /* c'est divisible par 4 */
  margin-left: auto;
  margin-right: auto;
  }
.box {
  width: 247px;
  float: left;
  }

++
gray est plus universel.

-

**c_s_s** · 27/11/2008, 14h43

Je me demande quel impact peut avoir la division en 4 d'un bloc dont la largeur n'est justement pas divisible en 4.

Vous avez déjà lu des choses là dessus ?

**GihefBey** · 27/11/2008, 14h54

Bonne remarque.

Envoyé par c_s_s

Vous avez déjà lu des choses là dessus ?

Non, mais la puissance de calcul de IE semble être prise en défaut dans ce cas.

D'ailleurs

Code css :

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

1
2
3
4
5
6
7
8
9
.page {
  width: 988px;  /* c'est divisible par 4 */
  margin-left: auto;
  margin-right: auto;
  }
.box {
  width: 25%;
  float: left;
  }

fonctionne aussi.

+

**c_s_s** · 27/11/2008, 15h05

En tout cas, après quelques petits tests sous IE7, la largeur du bloc .page a son importance quand les blocs qu'il contient ont des largeurs en %.

Dans le cas présent, s'il y a 4 blocs de 25% chacun, il faut effectivement que la largeur du contenant soit un multiple de 4.

Avec 988px et 992px, pas de problème.
Avec 990px, ça déconne.

Intéressant ce cas de figure.

**Erwan31** · 27/11/2008, 15h24

Envoyé par GihefBey

Dans la mesure où tu utilises des dimensions en px, les % ne sont pas vraiment utiles.

Oui et non, le redimensionnement éventuelle du bloc parent en px permet
d'éviter d'avoir à recalculer la largeur des 4 bloc enfant, mais tu faisais peut-être référence à autre chose?

**WalidNat** · 27/11/2008, 17h18

Merci pour toutes ces réponses.
Je vais essayer de justifier mes choix, je compte sur vous pour me dire si c'est ridicule ou pas :

La taille de .page me sers à indiquer en une seule et unique fois la largeur de ma page. Elle fait 990px car il me semble que c'est, au pixel près, une pleine page en résolution 1024x768 et qui est TRES utilisée par les visiteurs du site (80% d'entre eux environ

). Si je met 992px, j'ai une scroll bar horizontale qui fait un peu tache.

L'utilisation de pourcentages me permettra de dimensionner automatiquement tous les éléments en fonction de la résolution du visiteur. Il ne me suffira que de changer la largeur dans .page et la taille des polices dans body pour agrandir les espaces en conservant les proportions et l'harmonie.

Sinon j'ai fait ce que j'aurais dû faire avant de poster, c'est a dire tester mes portions de codes... et cela fonctionne.
Mon problème est le même que celui des enfants scolarisés dans le collège représenté ici, il vient des parents

.

Je vous posterais l'ensemble du code si j'ai un problème, et si une âme charitable souhaite m'aider, il trouvera la source ici :
http://slapcountdown.free.fr/clg

Merci

**Erwan31** · 27/11/2008, 17h36

C'est parce que tu n'as pas pensé à ajouter un clear:left; au niveau du bloc qui suit #firstseen qui comprend un bloc flottant (celui qui contient l'image).
Tu dois donc ajouter un clear:left; à #espaces

**GihefBey** · 27/11/2008, 20h04

Envoyé par Erwan31

Oui et non, le redimensionnement éventuelle du bloc parent en px permet
d'éviter d'avoir à recalculer la largeur des 4 bloc enfant, mais tu faisais peut-être référence à autre chose?

Sans savoir que le design allait devoir être adapté à la résolution des visiteurs, je faisais référence à un peu de logique emprunte de simplicité.
Le design est fixe. Son contenu aussi.
Il se trouve qu'un calcul sera nécessaire et qu'un multiple de 4 va quand même devoir être utilisé.

Et je me suis servi des résultats que voulait bien afficher netrenderer (je n'utilise pas IE).
L'option IE6 affichait quelque chose de très bizarre.

Et aussi, supprime la width de la .page et teste.
Quelle est l'utilité de voir les titres se déplacer différemment des <ul> au redimensionnement de la fenêtre du navigateur ?

-

Aligner horizontalement 4 blocs div

Positionnement en CSS

Discussions similaires

Partager

Partager