Discussion :

[Michel_57]

bonjour, j'ai un petit problème de css, j'ai déjà recherché sur le net et d'après ce que j'ai pu lire, lorsqu'on place 2 blocs div, il se placent de manière naturelle l'un en-dessous de l'autre car ils occupent 100% de la largeur de l'espace qui leur est fourni et si on veut les mettre l'un à côté de l'autre il faut utiliser la propriété float

pourquoi mes 6 mots dans le code suivant sont-ils tous dans la même ligne ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    <div>
      <div style="float: left; width: 100px;">mot1</div>
      <div style="float: left; width: 100px;">mot2</div>
    </div>
    <div>
      <div style="float: left; width: 100px;">mot3</div>
      <div style="float: left; width: 100px;">mot4</div>
    </div>
    <div>
      <div style="float: left; width: 100px;">mot5</div>
      <div style="float: left; width: 100px;">mot6</div>
    </div>

je précise que le tout est contenu dans un div de largeur supérieure à 600px.

je schématise : je voulais que l'affichage se fasse ainsi :

# #
# #
# #

et non ainsi :

# # # # # #

merci d'avance

[troumad]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
      <div style="float: left; width: 100px;">mot1</div>
      <div style="float: left; width: 100px;">mot2</div>
</div>

à remplacer par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div style="width: 100px;">
      <div style="float: left;">mot1</div>
      <div style="float: left;">mot2</div>
</div>

Ça sera peut-être mieux

[Michel_57]

en effet si je spécifie les width pour chaque div ça fonctionne mais je ne comprends pas le principe, ça marche c'est bien mais j'aimerai comprendre pourquoi avant il revenait pas à la ligne, vu que la théorie dit que les div se mettent toujours l'un en dessous de l'autre sauf si l'on précise le contraire avec float :/

[marsupix]

ou sans spécifier la largeur:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <div style="float: left; width: 100px;">mot1</div>
  <div style="float: left; width: 100px;">mot2</div>
</div>
<div style="clear:left;">
  <div style="float: left; width: 100px;">mot3</div>
  <div style="float: left; width: 100px;">mot4</div>
</div>
<div style="clear:left;">
  <div style="float: left; width: 100px;">mot5</div>
  <div style="float: left; width: 100px;">mot6</div>
</div>

car tu as mis des float.
Une fois un float mis sur un élément, l'élément suivant suit la règle des float pour l'alignement (pas très clair je sais).
En gros qi tu as mis un float:left, tu l'annule (pour retrouver le comportement normal avec clear:left, clear:right pour annuler un float:right, clear:both annule les float:left et float:right en même temps (pour être sûr tu peux utiliser celui là)

et pour ta question:

j'aimerai comprendre pourquoi avant il revenait pas à la ligne, vu que la théorie dit que les div se mettent toujours l'un en dessous de l'autre sauf si l'on précise le contraire avec float :/

Quand tu met float:left; tu dit au navigateur que l'élément sur lequel est appliqué le float va se comporter comme un "caractère aligné à gauche" et donc l'élement suivant va se placer à sa droite...
Donc si tu as mi 2 div avec un float:left; pour les mettre les 2 à la suite de l'autre, il faut ensuite annuler le float et lui dire que la div doit retrouver son comportement normal (les une en dessous des autres) avec clear, comme expiqué plus haut

[Michel_57]

je ne vois pas pourquoi je dois l'annuler vu que c'est l'enfant qui hérite du parent et non l'inverse (si il y a hérédité pour ça).
le float: left; est imbriqué dans le div sans float donc je pensais que les 2 éléments allaient s'aligner à gauche mais à l'intérieur du div parent.
mais bon, je vais faire avec !

merci pour l'astuce

[troumad]

Merci... Comme un petit coup de main apporte beaucoup ! J'ai cru aider et j'ai appris pleins de choses