perte de flux dans un div

Bonjour,

Je développe actuellement un arbre avec de l'ajax mais je rencontre un problème lors de l'affichage. Tout d'abord j'affiche tous mes documents qui ont pour parent 0 puis lors d'un clique sur un dossier j'affiche les fils de ce dossier et ainsi de suite.
J'affiche les premiers documents horizontalement c'est à dire un document par ligne puis lors du clique sur un dossier j'affiche les sous dossiers l'un à coté de l'autre à l'aide d'un float left. Jusqu'ici pas de problème mais ensuite lors d'un clique sur un sous dossier l'affichage s'effectue au dessus des autres documents. Je dois perdre surement le flux dans mes div.

Voici un bout du code qui permet l'affichage des documents :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
for($j=0;$j<$nbLignes;$j++){ //boucle des lignes
 
  echo "<div id=ligne style='margin:12px;' >";  //div ligne
    for($i=$min;$i<$totalLimit;$i++){ //boucle des colonnes
 
       if( $table[$i]['repertoire'] ){  /*si c'est un rep on affiche un lien qui  permet l'affichage de ses fils */
          $lien="<a onclick='javascript:RecupererFils(".$table[$i]['iddoc'].")' title='".$table[$i]['iddoc']."' href='javascript:void(0)'> 
                  <div>
                    <p style='text-align:center;'>".utf8_encode($table[$i]['titre'])."</p>
                  </div>$idfixe
                  <div style='margin:12px' id=".$table[$i]['iddoc']."></div>";
 
          $img="<img style='text-align: center;' src=../../../modules/quitodocsADV/img/folder.gif border=0>"; 
        }
      else{ 
        $extension=explode('/',$table[$i]['format']);   //extrait l'extension du fichier
        if ($extension[1]=="pdf")
          $img="<img style='text-align: center;' src=../../../modules/quitodocsADV/img/pdf.gif border=0>";
        else if($extension[1]=="vnd.ms-powerpoint")
          $img="<img style='text-align: center;' src=../../../modules/quitodocsADV/img/ppt.gif></p>";
        $lien="<a title='".$table[$i]['iddoc']."' href='javascript:void(0)'> 
                <div>
                  <p style='text-align:center;'>".utf8_encode($table[$i]['titre'])."</p>
                </div>
              ";
        }  
 
       echo "
        <div class='centrage' >
         <FONT SIZE=1>
               <div>
               <p style='text-align:center;'>$img</p>
               </div>$lien      
         </FONT> 
        </div>" ; //fin div element  
 
      }
 
 
  echo "</div>"; //fin div ligne
  echo "<div style='clear:both;'></div>";
  $min=$totalLimit; 
  $newlimit=mysql_query("SELECT * FROM document WHERE parent=".$iddocument." LIMIT $min,$nb"); 
  while ($newresLimit = mysql_fetch_assoc($newlimit)) {
    $newtableLimit[]=$newresLimit;     
  }
  $newtotalLimit=count($newtableLimit);
  $totalLimit=$nb+$newtotalLimit;
 
} //fin boucle lignes

Le css qui va avec

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
div.centrage 
{
  height:110px;
  float:left;  /* mettre des div l'un à coté de l'autre  */
  margin:0 auto;
  text-align: center;
  width:70px;
  background-color: #FFFFFF;
  padding: 2px;
  border-width: 1px;
  border-top-width: 0px;
  border-style: solid;
  border-color: #e1e8ef;
  margin-bottom: 0px;
  text-align: justify;
  /*position:relative; */
}
 
div.centrage a
{
color: black;
}
 
div.centrage:hover
{
  background-color:#0099FF;
  opacity:.3;  
}

Voila j'espère que vous m'avez compris.