[CSS] div l'un en dessous de l'autre

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:

---

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

Code:

---

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:

---

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

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 :/

ou sans spécifier la largeur:

Code:

---

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:

Citation:

---

Envoyé par Michel_57

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

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 :)

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

c'est tout le plaisir de ce forum je trouve, partager ses connaissances (bien sur personne n'a la science infuse...)

Bonjour,
En cherchant une solution à ce problème, j'en étais parvenu au code suivant:

Code:

---

1 2 3 4 5 6 7

<div class="left">mot1</div> <div>mot2</div> <div class="left">mot3</div> <div>mot4</div> <div class="left">mot5</div> <div>mot6</div>

---

avec la css suivante:

Code:

---

1 2 3 4 5 6

.left { float: left; width: 100px; }

---

En gros j'ai supprimé des <div> enlevé un float: left sur deux et mis le style dans une css. A premère vue cela fonctionne sur FF et IE mais le fait d'enlever des <div> peut il poser problemes par la suite?
Même question pour la suppression du float: left .

Merci d'avance, j'avoue que tout ceci est encore un peu obscur pour moi.:oops: