Des div flottants qui sortent de leur parent ?

Bonjour,

J'avais continué à écrire dans ma première demande (Background disparu sous FF) mais je pense que créer un nouveau sujet serait plus approprié.

Mon problème est le suivant : j'ai un div "contenu" qui regroupe 3 div flottants "gauche", "centre" et "droit". Lorsque je mets des div à l'intérieur du "droit", ceux-ci se décalent à gauche, comme s'ils agrandissaient leur div parent "right".
J'ai essayé de mettre des des div clear ansi que des overflow hidden, mais rien n'y fait... Ou alors je m'y prends très mal...

Auriez-vous une idée?

Voici le site : http://www.tv7.com/site_new/

Voici le CSS (simplifié)

#main{
margin:auto;
background-image:url(img/background.png);
background-repeat:repeat-y;
width:962px;
}

#contenu{
width:936px;
margin-left:23px;
overflow:hidden;
}

/*^'^ Contenus ^'^*/

#gauche{
background-image:inherit;
width:202px;
float:left;
}

#btn-live{
width:202px;

}

#moment{
width:198px;
height:auto;
border:solid #2ebdeb 1px;
border-top:none;
margin-bottom:15px;
}

#meteo{
width:198px;
height:auto;
text-align:center;
border:solid #2ebdeb 1px;
border-top:none;
margin-bottom:15px;
}

#so{
width:198px;
height:auto;
border:solid #2ebdeb 1px;
border-top:none;
}

#centre{
width:400px;
float:left;
height:auto;
}

#player{
margin-top:-4px;
width:400px;
}

#droit{
float:left;
width:300px;
height:auto;
overflow:hidden;
}

#une{
width:298px;
border:solid #2ebdeb 1px;
border-top:none;
}

#dernieresvideos{
width:298px;
border:solid #2ebdeb 1px;
border-top:none;
}

et le HTML

<div id="main">
    <div id="contenu">
    	<div id="gauche">

			<div id="btn-live"><a href="mms://88.191.38.77:80/live.asf" target="_blank"><img src="img/btn-live.jpg" /></a>            </div>
            
        
            
            <img src="img/en_ce_moment.gif"/><br/>
            <div id="moment">this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test<br/>
            </div>
            
            <img src="img/head_meteo.gif"/><br/>
            <div id="meteo"><img src="http://www.tv7.com/data/meteo/4jours.jpg" alt="meteo gironde" height="165" width="165"><br/>
            </div>
            
            <img src="img/head_so.gif" /><br/>
            <div id="so">Encore un meurtre à Trifouilli les Oies<br/>Et là c'est le drame<br/>
            </div>
            </div>
            
		<div id="centre">
            <div id="player">
            	<object type="application/x-shockwave-flash" width="400" height="300" wmode="transparent" data="flvplayerGUGU.swf">

             	</object>
            </div>
            <object type="application/x-shockwave-flash" width="400" height="300" wmode="transparent" data="flvplayerGUGU.swf">

             	</object> 
        </div>
         <div style="overflow:hidden"></div>S  
        <div id="right">
			<SCRIPT LANGUAGE='JavaScript'>
<!--
OAS_AD('Position2');
//-->
			</SCRIPT>
				
            <img src="img/head_une.gif" /><br/>
            <div id="une">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac justo a eros consequat eleifend. Nam volutpat malesuada erat. Maecenas.
            </div>
                
            <img src="img/head_dernieres_videos.gif" /><br/>
            <div id="dernieresvideos">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac justo a eros consequat eleifend. Nam volutpat malesuada erat. Maecenas.
            </div>        
	    </div>          
	</div>
</div>

Bonjour,

Alors, en quelques étapes:

1. Télécharger Firefox si ce n'est pas déjà fait.
2. Installer l'extension Firebug.
3. Activer l'extension (F12), activer le mode «Inspect», et aller chercher le bloc de droite. Le bloc en question est div#right.
4. Vérifier que Firebug est bien sur les onglets HTML et Styles.
5. Constater qu'absolument aucun style CSS ne s'applique à div#right, en dehors des styles hérités de BODY.
6. Relire son code CSS.
7. Constater qu'il n'y a aucun sélecteur pour div#right.
8. Se rendre compte que si on écrit div#droit dans la feuille de styles, et <div id="right"> dans le code HTML, ça risque de ne pas marcher.

...et 9, penser à utiliser Firebug (et la Web Developer Toolbar à l'occasion) la prochaine fois.

Bonjour,

En ayant jeté un rapide coup d'œil (merci Firebug) il semblerait qu'il manque à ta div droite un float:left.

C'est une piste

[EDIT] doublé par Florent
Modifié par zzzazzz (12 Jun 2008 - 10:28)

j'ai honte....