Bases 2

Vous avez sans doute constaté que lorsque vous écrivez une ligne, par exemple, et que vous faites un saut le ligne (touche entrée), la ligne suivante se place dessous automatiquement.

Parfois, vous souhaitez que la seconde ligne reste su même niveau que la première; si vous avez ouvert le code-source (<>), vous avez constatez que votre première ligne est écrite dans un paragraphe: exemple:

"Bonjour tout le monde" y est écrit <p>Bonjour tout le monde.</p>

Nous avons vu qu'un paragraphe, par défaut, occupe toute la largeur de la page ou du contenant, le seconde ligne, que sera dans un autre paragraphe, ne pourra que se placer dessous.

<p>Bonjour tout le monde.</p>

<p>Tout va bien ?</p>

Si je veux que ces deux lignes se suivent, je vais devoir faire 2 choses:

- dire à chacun des paragraphes (<p>) qu'il doit faire une largeur bien précise (en px ou en %).  <p style="width:40%;">1</p> et <p style="width:40%;">2</p>

- dire à chacun placez-vous l'un à côté de l'autre en ajoutant un attribut: float qui, en principe, fait s'aligner, dans notre système d'écriture, par rapport au bord gauche: float:left; 

   Sachez que si vous écrivez: float:right; c'est le bord droit qui servira de référence.

   Mes bricolages n'ont pas réussi à animer un élément en douceur, en animant par float: exemple ci-dessous en survolant le paragraphe vert qui passe brutalement de float:right; à float-left;...Mais ce n'est pas le sujet!

Pour deux lignes de texte, l'intérêt est limité puisque l'on peut écrire dans le même paragraphe mais si vous voulez placer un cadre avec du texte, à côté d'un cadre contenant une image, par exemple, par défaut, ils vont se placer l'un sous l'autre.exemple

Le premier arbre fruitier en fleurs, de mon coin et c'est chaque année pareil.

Sans attribut particulier, le second paragraphe se place sous le premier.

<p style="float: left; width: 50%;"><img style="width: 100%;" src="http://ekladata.com/YcWQLjYTnsTJ1yjd-fJJHZzAPYE#960x540.jpg" alt="" /></p>
<p style="float: left; width: 45%; text-align: center; border: 0.1vh solid black;">Le premier...</p>

Le premier paragraphe, d'une largeur de 50% de la page, contient l'image format totale (100%) et accepte une autre paragraphe, à cöté (float:left;) et, selon les largeurs, nous pourrions placer d'autres paragraphes à la suite.
Le second paragaphe se place à cöté (float:left) en faisant attention que la somme des deux largeurs ne dépasse pas 95% de la largeur de la page (par sécurité !)

Second paragraphe.