28234 sujets

CSS et mise en forme, CSS3

[RESOLU]Backround-color sur éléments DIV enfants flotants

bonjour,
j'ai un petit soucis sous Firefox. Le style css background-color ne s'applique pas lorsque les éléments DIV enfants sont flotant.
voici mon code fonctionnel sous IE:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test</title>
<style type="text/css">
<!--
	.divparent
	{
		width: 426px !important;
		width: 400px;
		font-weight: bold;	
		background-color: #ccc;
		color: #333;		
	}
	
	.divparent:hover
	{
		background-color: #999;
		color: #f00;
	}

	.divenfantgauche
	{
		float: left;
		width: 200px;
		padding: 3px;
		padding-left: 10px;
	}
	
	.divenfantdroit
	{
		float: right;
		width: 200px;
		padding: 3px;
		padding-left: 10px;
	}
	
-->
</style>
</head>
<body>
	<div class="divparent">
		<div class="divenfantgauche">div flotant gauche</div>
		<div class="divenfantdroit">div flotant droit</div>
	</div>
	<div>&nbsp;</div>
	<div>
		<div class="divparent">
			<div>div non flotant</div>
			<div>div non flotant</div>
		</div>
	</div>
</body>
</html>


Merci d'avance pour votre aide Smiley cligne
Modifié par jparia (22 Dec 2009 - 18:39)
Yo!

En fait, l'attribut s'est bien appliqué. Cependant, une div parente dont le contenu est intégralement flottant a besoin qu'on lui fixe une taille. Sans cela, elle a tout simplement un "height" nul par défaut. Du coup, à l'affichage, pas de div visible, donc pas de couleur Smiley cligne

On contourne ce problème en ajoutant un overflow:hidden dans la css de la div parente, ce que j'ai fait pour ta css à toi (et qui semble marcher) : 


.divparent
{
	width: 426px !important;
	width: 400px;
	font-weight: bold;	
	background-color: #ccc;
	color: #333;
	overflow: hidden;		
}

.divparent:hover
{
	background-color: #999;
	color: #f00;
}

.divenfantgauche
{
	float: left;
	width: 200px;
	padding: 3px;
	padding-left: 10px;
}

.divenfantdroit
{
	float: right;
	width: 200px;
	padding: 3px;
	padding-left: 10px;
}

Modifié par lautrejojo (22 Dec 2009 - 17:22)
ok, c'est à retenir, ça marche nickel sous FF et opera.

Merci encore pour ton aide Smiley langue
Modifié par jparia (22 Dec 2009 - 18:39)
Sujet clos
Aller à