Div avec des div float à l'intérieur

Bonjour,

Je sollicite votre aide pour un comportement que je ne comprends pas :

J'ai des éléments bloc positionnés en float à l'intérieur d'un conteneur de type bloc. jusque là tout va bien.

Lorsque j'ajoute un autre éléments de type bloc sous mon premier bloc conteneur celui-ci ne se positionne pas sous, mais à côté de mon premier conteneur (comme s'il avait la propriété float).

Il me semblait que les conteneur div sont de type bloc et qu'il se positionnent dans le flux naturel, donc en dessous.

Pour illustrer :

<div class="mainContainer"> 
  <h3>Gestion sportive</h3>
  <div id="gestionSaison" class="Container"> 
    <h3>Gestion de la saison</h3>
    <ul class="menuIndex">
      <li><a href="">Nouvelle saison</a></li>
      <li><a href="">Nouveau championnat</a></li>
      <li><a href="">Nouvelle &eacute;quipe</a></li>
    </ul>
  </div>
  <div id="gestionResultat" class="Container"> 
    <h3>Saisie des r&eacute;sultats</h3>
    <ul class="menuIndex">
      <li><a href="">Saisir les r&eacute;sultats</a></li>
    </ul>
  </div>
</div>
<div class="mainContainer"> 
  <h3>Gestion du site</h3>
  <div id="gestionResultat" class="Container"> 
    <h3>Saisie des r&eacute;sultats</h3>
    <ul class="menuIndex">
      <li><a href="">Saisir les r&eacute;sultats</a></li>
    </ul>
  </div>
</div>

.Container{
	border: 1px solid #333333;
	float: left;
	display: block;
	width: 180px; height: 200px;
	margin-right: 20px;
	padding: 5px;
}
.mainContainer{
	display: block;
}

Ca m'a pas l'air pourtant bien compliqué.

J'aimerais ne pas avoir a spécifier de hauteur à mon mainContainer. Est-ce possible ?
Modifié par beubeu (23 Mar 2006 - 03:09)

Si ton organisation c'est bien


Gestion sportive : Gestion de la saison + Saisie des résultats

Gestion du site : Saisie des résultats


Donc chacun sur sa ligne respective.

Il te faut ajouter

.mainContainer{

	display: block;
	clear:both;

}

Effectivement le clear:both fonctionne correctement, il renvoie à la ligne mes différents conteneurs.

Par contre cela me génère un problème : J'ai un bloc en foat:right qui doit toujours se positionner en haut à droite de ma page.
Le clear:both renvoie mes conteneurs en dessous de ce bloc en float:right.

<div id="partnerContainer"> 
      <p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p><p>Bloc partenaire</p>
</div>

<div id="content">
<h2>Administration du site</h2>

<div class="mainContainer"> [#orange]le clear:both le renvoi à la ligne en dessous de mon bloc partnerContainer[/#]
  <h3>Gestion sportive</h3>
  <div id="gestionSaison" class="Container"> 
    <h4 class="titreMenuBlock">Gestion de la saison</h4>
    <ul class="menuIndex">
      <li><a href="">Nouvelle saison</a></li>
      <li><a href="">Nouveau championnat</a></li>
      <li><a href="">Nouvelle équipe</a></li>
    </ul>
  </div>
  <div id="gestionResultat" class="Container"> 
    <h4 class="titreMenuBlock">Saisie des résultats</h4>
    <ul class="menuIndex">
      <li><a href="">Saisir les résultats</a></li>
    </ul>
  </div>
</div>
<div class="mainContainer"> 
  <h3>Gestion du site</h3>
  <div id="gestionResultat" class="Container"> 
    <h4 class="titreMenuBlock">News</h4>
    <ul class="menuIndex">
      <li><a href="">Nouvelle news</a></li>
      <li><a href="">Gérer les news</a></li>
    </ul>
  </div>
  <div id="gestionResultat" class="Container"> 
    <h4 class="titreMenuBlock">Entraineurs</h4>
    <ul class="menuIndex">
      <li><a href="">Nouvelle fiche</a></li>
      <li><a href="">Gérer les fiches</a></li>
    </ul>
  </div>
  <div id="gestionResultat" class="Container"> 
    <h4 class="titreMenuBlock">Entraineurs</h4>
    <ul class="menuIndex">
      <li><a href="">Nouvelle fiche</a></li>
      <li><a href="">Gérer les fiches</a></li>
    </ul>
  </div>
  <div id="gestionResultat" class="Container"> 
    <h4 class="titreMenuBlock">Entraineurs</h4>
    <ul class="menuIndex">
      <li><a href="">Nouvelle fiche</a></li>
      <li><a href="">Gérer les fiches</a></li>
    </ul>
  </div>
</div>
</div>

#partnerContainer {
	width: 130px;
	border: 1px solid #000;
	float: right;
	background-color: #CCCCCC;
	margin: 5px;
}
.Container{
	border: 1px solid #333333;
	float: left;
	display: block;
	width: 180px; height: 200px;
	margin-right: 20px;
	padding: 0px;
}
.mainContainer{
	display: block;
	clear:both;

}