[résolu] Div qui passe sur un autre

Salut.
J'ai un petit problème de css.

En effet j'ai un div qui passe sur le bas de mon site quand le div en question à un contenu qui s'agrandi.
Sous IE ce problème ne se pose pas car le div du bas se met toujours en dessous du div qui peux s'agrandir mais sous mozilla le div passe par dessus.

Comment faire pour que le div du bas suive l'agrandissement ou non du div du dessus?

Voici le code html.

<div id="le_tout">

<div id="barrehautespace_login_haut">
<div id="barrehaut"></div>
<div id="espace_login_haut">
</div>
</div>

<div id="menu"></div>

<div id="header">
</div>

<div id="barrebleu_haut"></div>

<div id="barrebleu_sous">
</div>


<div id="principal">

<div id="cadre_bleu">
  <div id="bloc_gauche"><div id="bleu_gauche"></div><div id="contenu_gauche">sdfgsdfg</div></div>
<div id="bloc_droite"><div id="bleu_droite"></div><div id="contenu_droite">
  <p>sdfgsdfgs</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
  <p>h</p>
  <p>df</p>
  <p>fd</p>
  <p>gd</p>
  <p>f</p>
  <p>gd</p>
  <p>f</p>
  <p>g</p>
  <p>df</p>
</div></div>
</div>


<div id="log_pub">
<div id="log"><div id="haut_log"></div><div id="fond_log">fds<BR></BR>fds<BR></BR></div></div>
<div id="pub">pub</div>
</div>


</div>

<div id="bas"></div>

</div>

et le css

#le_tout {
width: 944px;
border: 1px solid black;  /*1 OU 2*/

}

#menu {
background-image: url(images/menu.jpg);
background-repeat: repeat-x;
height: 28px;
width:944px;
}

#header
{
background-image: url(images/header.jpg);
height: 79px;
width:944px;
/*prob de taille sous mozilla -> mettre un width avec un conditionnement pour IE*/
}

#barrehautespace_login_haut {
height:30px;
width: 944px;
}

#barrehaut {
background-image: url(images/haut.jpg);
height: 30px;
width: 744px;
float:left;
}


#espace_login_haut {
height:30px;
width:200px;
float:right;
background-color:#00FF00;
}

#barrebleu_haut {
background-image: url(images/barrebleu_haut.jpg);
background-repeat: repeat-x;
height:26px;
width:944px;
}

#barrebleu_sous {
background-image: url(images/barrebleu_sous.jpg);
background-repeat: repeat-x;
height:17px;
width:944px;
}


#principal {
height: 480px;  /* pas mettre taille fixe*/
width: 944px;

}




#cadre_bleu{
width: 663px;
float:left;
margin-top:7px;
}


#bloc_gauche {
margin-left:5px;
float:left;
border: 1px solid #2C82B3;
}



#bloc_droite {
margin-right:6px;
float:right;
border: 1px solid #2C82B3;
}

#bleu_gauche{
background-image: url(images/bleu_gauche.jpg);
height:23px;
width:434px;
}

#bleu_droite{
background-image: url(images/bleu_droite.jpg);
height:23px;
width:208px;
}



#log_pub{
width:275px;
float:right;
margin-top:0px;

}

#log{
float:left;
}

#haut_log{
background-image: url(images/haut_log.jpg);
height:47px;
width:120px;

}

#fond_log {
background-image: url(images/fond_log.jpg);
background-repeat: repeat-y;

}

#pub {
float:right;
width:auto;
}

#bas {
background-image: url(images/bas.jpg);
height:56px;
width:944px;
}

#contenu_droite {
height:auto;

}

C'est donc contenu droite qui passe sur le div bas.
Merci de m'aider.
COrdialement.
Modifié par marseille (04 Jan 2006 - 17:22)

Salut,

Je pense que tu peux ajouter la propriété "clear : both;" à "#bas"


Alain

Ohhhhhhhhhhhhh, merci beaucoup c'est exactement ce qu'il me fallait.

marseille a écrit :
Ohhhhhhhhhhhhh, merci beaucoup c'est exactement ce qu'il me fallait.

On peut supposer que le problème est [Résolu] ?