[debutant]Div les uns à côté les autres indépendants

**sorry60** · 07/06/2007, 20h31

Bonjour,

Je cherche à positionner 3 divs les uns à cotes des autres, et qu'ils soient independants, et tout celà dans un grand div englobant tout.

Voici mon 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
 
.div_cont{
	background-color: #FFFFFF;
	margin-left : auto;
	margin-right : auto;
	text-align : left;  /* pour résoudre le bug de centrage de IE */
	width: 80%;
	height: 100%;
	overflow: auto;
	border: 2px solid #DDDDDD;
}
.div_top {
	color: #FFCC00;
	text-align:center;
	border-bottom: 1px solid #DDDDDD;
}
.div_left {
	text-align:center;
	border-right: 1px solid #DDDDDD;
	height: 100%;
	width: 25%;
	float:left;
}
.div_center {
	text-align:center;
	height: 100%;
	width: 50%;
}
.div_right {
	text-align:center;
	border-left: 1px solid #DDDDDD;
	height: 100%;
	width: 25%;
	float: right;
}

et le 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
 
<body>
<div class="div_cont">
	<div class="div_top">
		<img class="top" src="images/banniere.png" width="100%" height="150" alt="Banniere" title="Bannière" />
	</div>
	<div class="div_left">
		<span class="titre">Menu</span><br /><br />
		<input type="submit" value="TEST" /><br /><br />
		<span class="titre">TEST</span><br /><br />
	</div>
	<div class="div_center">
		<span class="titre">Menu</span><br /><br />
		<input type="submit" value="TEST" /><br /><br />
		<span class="titre">TEST</span><br /><br />
	</div>
	<div class="div_right">
		<span class="titre">Menu</span><br /><br />
		<input type="submit" value="TEST" /><br /><br />
		<span class="titre">TEST</span><br /><br />
	</div>
</div>
</body>
</html>

Ca fonctionne bien pour le div de gauche et du centre, mais celui de droite se met bien à droite, mais en dessous les autres.. donc ils sont pas independants.

J'espere avoir été clair, c'est pas facile à expliquer

Merci pour votre aide

**sorry60** · 07/06/2007, 20h38

J'ai resolu le problème sous firefox, il fallait (dans le code html) mettre le div_right avant le div_center :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
       <div class="div_left">
          test
	</div>
	<div class="div_right">
          test
	</div>
	<div class="div_center">
          test
	</div>

Mais sous IE ça donne pas la même chose, le div_center est mal placé

**sorry60** · 07/06/2007, 21h22

Je crois que sous IE le bug vient que quand dans un des divs (par exemple div_left) je met

Code :

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

width: 25%

Il prend ça pour 25% de la largeur du navigateur, alors que moi je veux qu'il occupe 25% de la largeur du div global !

quelqu'un a une idée ?

Edit : non c'est pas ça, j'ai essayé petit à petit quand je met 25% pour celui de gauche, 50% pour celui du centre et 24% pour celui de droite, ça marche bien, sauf qu'il reste bien 1% du div general pas utilisé, mais quand je passe à 25% celui de droite, ça bug et ça va à la ligne

**Candygirl** · 07/06/2007, 22h15

Le problème vient de l'arrondi mathématique que IE fait avec les %.

Si tu as 2x X.5 il les arrondis 2x au nombre de pixel supérieur => 1px de trop sur la largeur.

Pour contrer, il suffit de mettre 49.99 et 24.99 (qu'une fois). Le problème est que si tu le mets tel quel dans le css tu vas te trouver confronté à un souci sur opera qui interprétera 49 et 24 (d'après mes tests il ne prend pas les fractions de % lorsque le nombre est écrit avec un point, mais avec une virgule si. Mais ie, lui, ne prend pas en compte la virgule, enfin bref... Je n'ai jamais vérifier ceci autrement que par mes tests personnels).

Donc, perso je ferais un code du genre:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
html,body {height:100%;}
 
* {padding:0;margin:0;}
#main {width:100%;height:100%; background-color:#FFFFCC;}
#d1,#d2,#d3 {float:left;height:100%;}
#d1 {width:25%;background:red;}
#d2 {width:50%;background:blue;}
#d3 {width:25%;background:green;}
</style>
<!--[if IE]>
<style type="text/css">
#d2 {width:49.99%;}
#d3 {width:24.99%;}
</style>
<![endif]-->
</head>
 
<body>
<div id="main"><div id="d1"></div><div id="d2"></div><div id="d3"></div></div>
</body>
</html>

Le seul truc à vérifier c'est sur IE5 mac surlequel je ne sais pas s'il a le même mode de calcul des % que sur les autres IE (et vu qu'il n'interpète pas les commentaires conditiionnels).

Autrement j'ai mis les 3 en float pour éviter le bug des 3px sur IE6, mais ça c'est à toi de voir...

**sorry60** · 07/06/2007, 22h42

Ok merci

[debutant]Div les uns à côté les autres indépendants

CSS

Discussions similaires

Partager

Partager