28173 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,
J'ai un problème tout bête, mais vraiment de base Smiley rolleyes
J'ai une page où je dois avoir 3 colonnes de taille en %
body {
	margin: 0px;
	padding: 0px;
}
.colGauche {
	background: #FFFF99;
	float: left;
	width: 30%;
	margin: 0px;
	padding: 0px;
}
.colCentre {
	background: #FF99CC;
	width: 30%;
	float: left;
	margin: 0px;
	padding: 0px;
}
.colDroite {
	background: #66FFFF;
	float: left;
	width: 40%;
	margin: 0px;
	padding: 0px;
}

Chacun de ces styles sont appliqués à trois boites <div>.
Dans IE, quand je redimensionne la fenêtre, ma troisème colonne se "barre" souvent, mais pas toujours, en dessous de la deuxième Smiley fache !
La je ne comprends pas ce qui se passe.
Cela doit être tout simple ?
C'est IE qui bugue ?
Dans Firefox et Opera c'est nif'.
Merci pour le coup de main !
Modifié par krakkos (02 Jan 2006 - 11:43)
Bonjour,

Cause possible de ton problème : une simple question d'arrondi.
30% + 30% + 40% est parfois supérieur à 100%
Exemple :
Ta fenètre fait 1002px de disponible en largeur
30% de 1002px = 300,6px, donc potentiellement arrondi à 301px (la méthode d'arrondi dépend des navigateurs)
40% de 1002px = 400,8px, donc potentiellement arrondi à 301px
30% + 30% + 40% = 301 + 301 + 401 = 1003px > 1002px, la taille de la fenètre. Conséquence immédiate avec 3 blocs en float : le 3ème passe à la ligne
Bonjour,
Cela veut donc dire qu'il faut que le total des largeurs relatives fasse moins de 100%, 99% par exemple ?