28172 sujets

CSS et mise en forme, CSS3

Problème de débordement de contenu

bonjour
soit le code html suivant:


...
<div class="conteneur">
 <div class="contenu">
   ...
   ...
  </div>
</div>
...


Code css


.conteneur 
{
 width:40%;
height:40%;
background-color:yellow;
}

.contenu
{
width:40%;
height:120%;
background-color:green;
float:left
}


avec IE le bloc conteneur suit le contenu flottant quand il déborde, tandis qu'en FF le conteneur refuse de suivre. Comment faire pour éviter un tel problème?C'est très moche!!!
Merci à tous.
Modifié par greeneye (28 Sep 2011 - 13:33)
Salut
Merci d'avoir répondu
Même avec une valeur "auto" pour la hauteur du conteneur ça ne mache pas.
Voici par exemple le code suivant:
HTML

...
<div class="cadre">
 <div class="conteneur">
  <div class="contenu">
Je suis votre ami.
Je sollicite votre aide.
Merci
  </div>
 </div>

 <div class="conteneur">
  <div class="contenu">
Je suis votre ami.
Je sollicite votre aide.
Merci
  </div>
 </div>
</div>
...



CSS


.cadre
{
	width: 98%;
	height: auto;
	border: double;
	border-color:  Blue;
	background-color: #E8FFEC;
	text-align: justify;
	font-size: 0.9em;
		
}

.conteneur
             background-color: #FFF1A2;
             float: right;
             height: auto;
             width: 49%;
             margin-left: 1%;
}

.contenu
{
           margin: 1%;
           color: #FF4500;	
           font-size: 90%;
}


Avec FF le conteneur déborde du cadre, alors qu'avec IE les dimensions du cadre s'ajustent au fur et à mesure avec l'élargissement du conteneur du texte.
Mon but initial était de faire une table de matière avec deux "float" côte à côte pour des sujets différents, mais à présent c'est la compréhension qu'est devenue la plus importante.
Merci
Modifié par greeneye (28 Sep 2011 - 13:18)
greeneye a écrit :
Avec FF le conteneur déborde du cadre

Et tu auras la même chose avec Opera, Chrome, Safari, Internet Explorer 8 (et 9 et 10).
C'est un comportement normal, mais qu'on peut éviter si nécessaire: Empêcher les flottants de dépasser de leur conteneur.

greeneye a écrit :
avec IE les dimensions du cadre s'ajustent au fur et à mesure avec l'élargissement du conteneur du texte

Pas avec IE8+ en mode Strict.
Ce sera le cas avec IE7 à cause de certains comportements non standard de ce navigateur (pour les détails: HasLayout et bugs de rendu dans Internet Explorer 6-7). Ce sera peut-être aussi le cas dans IE8 ou IE9 si pour une raison ou une autre le site s'affiche en mode de compatibilité IE7 ou pire en mode Quirks. Tu peux voir quel mode de rendu est utilisé grâce aux outils pour développeur d'Internet Explorer (8 et 9), que tu peux afficher avec le raccourci clavier F12 par exemple.

greeneye a écrit :
Mon but initial était de faire une table de matière avec deux "float" côte à côte pour des sujets différents, mais à présent c'est la compréhension qu'est devenue la plus importante.

Il y a beaucoup de choses pas très utiles dans ton code, par exemple le width:98% sur ton conteneur (garder une largeur automatique devrait suffire, et si tu veux avoir un peu de blanc d'un côté ou de l'autre tu peux utiliser des marges pour ça). Tu peux aussi supprimer les height: auto;, c'est la valeur par défaut.

Si tu réalises un site qui n'a pas besoin d'être compatible avec IE7, tu peux aussi faire l'impasse sur les flottants et utiliser display:table-cell à la place pour obtenir un affichage en colonnes.

PS: pourrais-tu modifier ton premier message (bouton "Éditer" en haut à droite) pour mettre un titre plus explicite que «Comment» à ce sujet? Merci d'avance.
Modifié par fvsch (28 Sep 2011 - 12:43)
Merci infiniment pour ces explications et ces éclaircicements.
Je vous assure que j'ai cherché avant de poster mon problème mais je n'ai pas trouvé. Excuse.
Pour le titre, c'était un simple oubli de complément, et quand je me suis rendu compte, mon message était déjà sur site, et je ne savais pas comment modifier. Merci pour l'orientation.
Salut.
Modifié par greeneye (28 Sep 2011 - 13:36)
Sujet clos
Aller à