Problème casse-tête avec width en pourcentage sur IE

Bonjour à tous!

Voilà j'ai un souci avec ce satané IE6/7 sur le devellopement d'un site.

Je dois créer des "blocs" ajustables en largeur (puisqu'ils doivent être placé dans différentes zones de templates (via un cms)) ,qui auront des tailles différentes.

Voici un schema de l'un des types de bloc 50% / 50% que je dois dévelloper.

Je dois aussi faire ce même type de dev avec des loc en 33% 33% 33% et 25% 25% 25% 25% mais tout ça c'est une autre histoire


Voici le code que j'utilise pour le html

<div class="com_centre_conteneur">
	<div class="com_centre_50">
    	<div class="com_centre_element"> Texte de remplissage Texte de remplissage Texte de remplissage </div>
    </div>
   	<div class="com_centre_50">
    	<div class="com_centre_element"> Texte de remplissage Texte de remplissage Texte de remplissage</div>
    </div>
</div>

et pour le css

.com_centre_conteneur{
clear:both;
}
   
.com_centre_50 {
float:left;
padding:1%;
width:48%;
background:#FF0000;
}   

.com_centre_element {
background:#00CC00;
border:1px solid #ccc;
}  

J'ai volontairemment mis en rouge le "bloc en 50" qui contient l' "élement" qui lui est en vert pour bien les identifier.

Tout fonctionne bien sur FF, si l'on redimmensionne la fenêtre, (pour simuler un conteneur différent) les blocs restent bien alignés.


Par contre sur IE, les blocs sont l'un en dessous de l'autre, comme si les éléments en float étaient trop "long" pour tenir sur la ligne.
Si l'on redimmensionne la fenêtre, suivant sa taille, ils sont ou non calés, mais je n'ai pas trouvé de logique dans ce comportement..



Je n'ai trouvé aucune solution et je ne connaissais pas ce type de problème sur IE. Je n'ai trouvé aucun article en rapport ni de Hack IE, peut être avez vous déjà recontrer ce type de problème?

Alors à votre bon coeur m'sieur, mdame!
Merci d'avance!

Bonjour !

Testes à 47 voir 46 % et mets ton div com_centre_conteneur en margin:0 auto pour le centrer dans ta page !

IE 6 a des problème avec le 100 %, et toutes tes mesures en largeur ajoutées font 100 %...

Ca vient je pense du modèle de boîtes IE....

Si ça fonctionne pas, reviens nous voir !

Merci pour ta réponse je test dès demain matin et vous tiens informer.

Bonjour,

Quelques propositions de corrections:

.com_centre_conteneur{
	overflow: hidden; /* empêche le dépassement des flottants */
	width: 100%; /* Idem pour IE6. Peut être remplacé par un zoom:1 adressé à IE6 uniquement via un commentaire conditionnel qui va bien */
}
.com_centre_50 {
	float: left;
	width: 50%;
	background: red;
}
.com_centre_element {
	margin: 10px;
	border: 1px solid #ccc;
	background: blue;
}

Avec cette configuration, le seul problème qui peut persister c'est le bug de calcul des arrondis en pixels pour les largeurs en pourcentages. Travailler avec des blocs de 49.5% de large au lieu de 50% peut aider, si le problème se produit. Même chose pour trois blocs: 33% par bloc et pas 33.333%.

@ Florent V. > Je ne comprends ta remarque concernant le width:100% et zoom:1.
Pour le width:100% : Une div sans précision de width est sensée prendre la taille de son conteneur, dans notre cas c'est donc le body. Est-ce un Hack pour IE pour forcer la largeur?
Je ne connais pas la class(?) zoom:1. Quelle est son utilité?

J'ai une feuille de style qui gere les exceptions pour IE, appelée par un commentaire conditionnel, j'ai donc essayé ta solution mais le resultat est le même..

Concernant les blocs en 33, je pensais m'arranger avec les espacements pour avoir un width total de 100% exactement (2% + 32% + 1% + 32% +1% + 32% + 2%)

Merci pour ton aide en tout cas.

@Rosegrenouille > Problème partiellement résolu: en effet en réduisant la taille de com_centre_50 à 47%, je n'ai plus ce problème sur IE.

Mais reste le problème du centrage, car margin:0 auto centre un élément seulement dans le cas où son width est renseigné.
Et je ne peux pas le renseigné puisqu'il doit être adaptable à son conteneur.
A moins de mettre un width:100% mais dans ce cas il prend toute la place et l'on revient au problème de départ...

Je continue de chercher dans ce sens et vous tiens informer.

zecaraz a écrit :
Est-ce un Hack pour IE pour forcer la largeur?
Je ne connais pas la class(?) zoom:1. Quelle est son utilité?

Dans les deux cas il s'agit d'un moyen pour forcer le HasLayout, afin d'empêcher le dépassement des flottants de leur conteneur dans IE 6. Le overflow: hidden, quant à lui, crée un contexte de formatage qui fait la même chose de manière standard (CSS 2.1).
Pour le HasLayout, voir la FAQ du forum. Pour le dépassement des flottants, faire une recherche sur ce thème.

zecaraz a écrit :
Concernant les blocs en 33, je pensais m'arranger avec les espacements pour avoir un width total de 100% exactement (2% + 32% + 1% + 32% +1% + 32% + 2%)

Le message caché de mon exemple de code était: ne pas utiliser les pourcentages pour les margin et padding. Uniquement pour les largeurs des blocs (et avec prudence). Et plus radicalement, ne pas donner de margin ou padding aux éléments flottants, sinon c'est la merde.
Après c'est toi qui vois...