Centrer des div en position float dans un autre div

Bonjour

Après mon problème d'hier, se présente un autre ou je n'ai aucune idée de résolution propre.

J'ai donc un div qui contient n listes (entre 2 et n pour être précis) qui me permettent de passer des paramètres d'une colonne à l'autre, un champs a bascule comme le nomme mes chefs.

Mon composant, généré en PHP marche dorénavant pas mal en mode 3 listes sur mon écran, mais dés que je le met en mode 2 listes ou en écran avec une résolution différente, j'ai des problèmes.

-> mon contenu (les 3 DIV : 2 listes plus un div contenant des boutons de passages de paramètres) n'est pas centré dans le div de class bascule(mon container).
-> si il y avait aussi une façon de mettre des div à la suite sans retour à la ligne ça m arrangerait, mais ce n'est pas ma priorité.

Avez vous une solution ?

Pierre


HTML

<div id="sites" class="bascule">
        <div class="titreBascule">Sites : </div>
        
      <select class="hidden" name="sites[]" multiple="multiple" id="sites"></select>
      <div id="sitesLi" class="droppables">
        <div class="titreDiv">Sélection</div>
        <ul class="drop">
        <li style="top: 1617px; left: 53px;" class="dragLi" idbase="1">Site de Rennes</li>

      
        <li style="top: 1631px; left: 53px;" class="dragLi" idbase="2">test</li>
      
       </ul>
      </div>
    
        <div class="listeBouttons">
          <input class="button" onclick="moveAllItemsBascule('diff_sitesLi','sitesLi');return false;" value="&gt;&gt;&gt;" type="button"><br>
          <input class="button" onclick="moveItemsBascule('diff_sitesLi','sitesLi');return false;" value="&gt;" type="button"><br>
          <input class="button" onclick="moveItemsBascule('sitesLi','diff_sitesLi');return false;" value="&lt;" type="button"><br>
          <input class="button" onclick="moveAllItemsBascule('sitesLi','diff_sitesLi');return false;" value="&lt;&lt;&lt;" type="button">

        </div>
      
      <select class="hidden" name="diff_sites[]" multiple="multiple" id="diff_sites"></select>
      <div id="diff_sitesLi" class="droppables">
        <div class="titreDiv">Diffusion</div>
        <ul class="drop">
       </ul>
      </div>
    
      <div style="clear: both;"></div>

      </div>
      <div style="clear: both;"></div>

CSS :

#fiche_de_vie div.droppables, div.droppables{
  margin: 20px 10px 5px 10px;
  width:250px;
  height:100px;
  overflow-y:scroll;
  overflow-x:auto;
  border:#00CCFF 4px groove;
  float: left;
}
#fiche_de_vie li.dragLi,li.dragLi{
  padding:0px;
  margin:0px;
  height: 14px;
  cursor:move;
  list-style-type:none;
  border:0px;
}
.dragLi:hover{
  border:1px solid red;
  background: #00CCFF;
  color:blue;
}
.selected{
  background:blue;
}
.hidden{
  display:none;
}
#fiche_de_vie ul.drop, ul.drop{
  padding-left:0px;
  margin:0px;
}
#fiche_de_vie div.bascule, div.bascule{
  border:1px solid black;
  width:95%;
  margin-left:auto;
  margin-right:auto;
  padding-left:auto;
  padding-right:auto;
}
#fiche_de_vie div.titreDiv, div.titreDiv{
  margin-left:auto;
  margin-right:auto;
  margin-top:-20px;
  position:absolute;
  text-align:center;
  width:250px;
  font-weight:bold;
}
#fiche_de_vie div.titreBascule, div.titreBascule{
  margin-left:auto;
  margin-right:auto;
  margin-top:-20px;
  position:relative;
  text-align:center;
  width:250px;
  font-weight:bold;
}
.listeBouttons{
  float:left;
  text-align:center;
  padding:10px 0 10px 0;
}
#fiche_de_vie div.bascule,div.bascule{
  margin-top:30px;
}