Problème Div flottantes

Bonjour à tous !

Je fais appel à vous parce que devinez, j'ai un problème ...

Sur un site que je suis en train de réaliser, une des mes pages contient des div flottantes à gauche avec une largeur fixe et une hauteur variable (selon contenu) qui permet d'avoir deux colonnes.
Le problème est que la troisième div va bien à la ligne mais ne commence que là où la deuxième se termine, se qui fait un blanc entre la première et troisième.
Petite illustration :

J'ai tenté des manips avec la propriété Clear mais rien de bien fameux ...

Avez-vous une idée ?
Vla en vous remerciant d'avance !
Modifié par bor1s (11 Jun 2010 - 15:41)

salut,
la solution la plus approprié a ton probleme je pense, est de faire 4 div, un dive qui contiendra tes 2 div de gauche, tes deux div de gauche et pour finir ta div de droite

tu applique ensuite des flot a la div conteneur et a la div2

<div id='conteneur' style='float : left;'>
<div id='1'></div>
<div id='3'></div>
</div>

<div id='2' style='float : left;'></div>

Personnellement j'aurais gardé le nombre et les blocs div initiaux en utilisant comme ceci :

<div id="div1">contenu1</div>
<div id="div2">contenu2</div>
<div id="div3">contenu3</div>

div {
    border:1px solid #ccc; /* juste pour les voir plus simplement [smile] */
}
#div1 {
    width: 123px; /* à modifier */
    float : left;
}
#div2 {
    float:left;
}
#div3 {
    width:123px;
    clear : both;
}

Modifié par pixelb (11 Jun 2010 - 18:34)

Re,

je reviens sur le problème n'ayant pas trouver de solution à mon problème, je précise que le nombre de div est aléatoire.
De plus le problème n'apparait qu'avec les div de la colonne gauche, à droite les div s'empilent comme il faut.

Bonjour,

C'est (le retour à la ligne au niveau du bloc le plus long) le comportement normal.

La seule solution est donc de remplir d'abord une colonne, puis l'autre. PHP ou JS peuvent t'aider à déterminer combiens de blocs doivent aller dans chaque colonne.

A je l'ignorais, très bien vais voir de ce coté là.
Merci !