[Résolu] Div flottant de taille variable

Bonjour à tous,

Voilà, j'ai un petit problème de div flottant. En clair, J'ai un certain nombre de colonnes (variables) , dont la taille peut être variable. Il se trouve que à l'époque en faisant cela avec des tableaux, tout se passait très bien, le body de la page scrollait automatiquement, mais ayant pris gout pour les divs, je ne voit pas comment faire cela. Automatiquement à la fin de la page tout passe à la ligne. J'ai aussi essayer de faire un div conteneur ayant overflow, mais tout ne fonctionne que verticalement, et jamais horizontalement. Quelqu'un aurait il une idée?

Merci de vos réponses.
Modifié par astrorobot (07 May 2009 - 14:58)

En fait, je pense que c'est le cas typique ou l'on atteint la limite des divs flottant. Bon, je pense que je vais repasser en mode tableau .

Bonjour,

J'avoue que je n'ai pas vraiment bien compris le problème.
Comme souvent, sans illustration, ni page en ligne, ni même code incriminé, on doit essayer de deviner... ce qui ne facilite pas les choses

Pour commencer, j'ai du mal à imaginer comment, en tableaux, tu faisais pour obtenir "un certain nombre de colonnes (variables)" ?

Raphael a écrit :
Bonjour,

J'avoue que je n'ai pas vraiment bien compris le problème.
Comme souvent, sans illustration, ni page en ligne, ni même code incriminé, on doit essayer de deviner... ce qui ne facilite pas les choses

Pour commencer, j'ai du mal à imaginer comment, en tableaux, tu faisais pour obtenir "un certain nombre de colonnes (variables)" ?

Si j'ai bien compris, le tableau s'agrandit automatiquement pour accueillir poliment toutes ses colonnes, quitte à scroller horizontalement ...

Et les DIV, flottants, n'agrandissent pas le conteneur, ils passent en dessous de leurs petits copains.

Enfin je crois que c'est ça

Mais un exemple et du code, ça aiderait !

Ok. Je vais tenter de faire simple.

Considérons un nombre de colonnes variables.
X|X|X|X...
En mode tableau, on fait un certain nombre de balises <td>
En mode div, on fait des div flottants

En mode tableau, lorsque la largeur de l'ensemble des colonnes dépasse la fenetre, ca scroll automatiquement verticalment.

En mode div, ca part a la ligne, et voilà le problème. Est-ce un peu plus clair?

Sorry de ne pas m'etre bien exprimé dès le départ.

astrorobot a écrit :

En mode tableau, lorsque la largeur de l'ensemble des colonnes dépasse la fenetre, ca scroll automatiquement verticalment.

Verticalement ???

Non non pardon mistik je me reprend, je voulais dire horizontalement

Et pour un exemple de code

css:

.flottant
{
float: left;
}

<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>
<div class="flottant">blablabla</div>

Au dela d'un certain nombre de div, les div passeront à la ligne.
Modifié par astrorobot (07 May 2009 - 14:51)

La "solution" serait de mettre tes div flottants dans un div conteneur et de lui donner comme largeur la somme des largeurs de tes div flottants (faisable en PHP si tu connais le nombre de div et leur largeur ou en JS si tu ne connais pas).


MAIS, le scroll horizontal est quelquechose d'absolument pas naturel pour le visiteur. Il est donc à éviter (en plus c'est casse pied quand la molette ne fonctionne pas >_<).

ps. : Pourrais-tu te conformer à la règle du forum qui dis que les portions de code doivent être formatée correctement au moyen des balises [ code] et [ /code] (sans espaces). Merci.
Modifié par Laurie-Anne (07 May 2009 - 13:51)

Merci Laurie-Anne de tes conseils. Mais malheureusement, la taille n'étant pas non plus fixe (et c'est bien là le deuxième problème), je ne peux pas non plus le calculer en js (enfin je ne sais pas comment, et je vais chercher dans ce sens). Je pense qu'on peux marquer le post comme résolu.

Encore merci.

Ps: La prochaine fois, je n'oublierais pas de formater mon code.

astrorobot a écrit :
Je pense qu'on peux marquer le post comme résolu.

C'est à toi de le faire via la fonction "éditer"

astrorobot a écrit :
Ps: La prochaine fois, je n'oublierais pas de formater mon code.

La même fonction "éditer" peut t'aider à le faire avant la prochaine fois.
Modifié par Laurie-Anne (07 May 2009 - 14:35)