28220 sujets

CSS et mise en forme, CSS3

[Résolu] Visualisation du fond d'une boite

Bonjour à tous,
J'ai un problème tout bête, de débutant ? Smiley confused
J'ai une boîte <div> conteneur avec une largeur et une couleur d'arrière plan :
#conteneur {
	background: #FFCC00;
	width: 300px;
}

J'ai une boite flottante à gauche, avec une largeur et une couleur d'arrière plan :
.boite {
	background: #99FF00;
	float: left;
	width: 100px;
}

Si je place ma boite flottante dans mon conteneur :
<div id="conteneur">
  <p>Mon conteneur</p>
  <div class="boite">Ma boite flottante</div>
</div>

Dans FF ou Opera, mais pas dans IE, je ne vois pas la couleur de fond de mon conteneur, comme si les deux boites étaient indépendantes et non imbriquées ?
Est-ce que c'est parce que je n'ai pas indiqué de hauteur à mon conteneur ? Car si je le fais je vois bien la couleur de fond ?
Merci pour votre aide
Modifié par krakkos (03 Jan 2006 - 17:44)
Bonjour krakkos,
Ceci est un fonctionnement normal.
Lorsque tu vas mettre du contenu après ta boite flottante, le conteneur va se remplir et le fond va apparaître.
Si il n'y a rien après, tu doit supprimer le "float: left;" de ".boite".
C'est effectivement les solutions : ajouter du contenu après ma boite flottante ou supprimer le flottement pour que le <div> rentre dans le flux normale de la page.
Mais pourquoi est-ce un
a écrit :
fonctionnement normal
?
Merci de votre aide.
Bonjour,

Dans CSS2.1, les flottants ne sont pas pris en compte dans le calcul de la hauteur de leur conteneur en flux. Ton conteneur a donc une hauteur nulle.

IE 5.x et 6.0 Win ont un rendu incorrect en raison d'un bug : le fait que ton conteneur soit dimensionné (width) fait que leur moteur de rendu lui donne un état particulier, qui n'existe que dans ce navigateur, le haslayout. Un conteneur doté de cet état s'étend en hauteur à tous ses descendants y compris les flottants.

Pour obtenir le même résultat dans les navigateurs conformes que dans IE, donner au conteneur la propriété overflow:hidden ou overflow:auto. Dans CSS2.1, un conteneur dont la propriété overflow est autre que visible s'étend à ses descendants flottants. Ceci n'a pas d'effet dans IE.
Modifié par Laurent Denis (03 Jan 2006 - 17:30)
Sujet clos
Aller à