Bonjour,

A la base, j'expérimente la propriété :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
position: valeur;

J'ai récupéré un code du MDN et mon problème semble assez simple, mais pourtant je ne trouve pas de solution "propre", à part une multitude de balise "br" et j'imagine qu'il y a moyen de faire mieux !

Le souci étant que je n'arrive pas à faire passer à la ligne un élement :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<hr>

J'ai lu quelque part qu'il vaut mieux éviter d'utiliser la balise hr, mais ici, mon but étant de séparer verticalement le lien hypertext de l'élément "principale".
Voici le test en question sur codepen : test position

Dont voici le code :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<h1>Propriété position</h1>
<span id="principale">
<div class="box" id="un">Un</div>
<div class="box" id="deux">Deux</div>
<div class="box" id="trois">Trois</div>
<div class="box" id="quatre">Quatre</div>
</span>
<!-- passage à la ligne du hr -->
<hr id="ligne">
<a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" title="source mdn" target="_blank">source MDN</a>

A l'origine, l'identifiant "principale" n'existait pas, j'espérais résoudre le souci en enfermant les éléments (1, 2; 3, 4), mais en vain.

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box { 
   display: inline-block; 
   background: #EECDF4; 
   width: 100px; 
   height: 100px; 
   float: left; 
   margin: 20px; 
   color: white; 
}
/* Permet de voir le cadre (test) */
#principale {border: 1px solid red;}
#deux { 
   position: relative; 
   top: 20px; 
   left: 20px; 
}
/* Pour le passage à la ligne du hr ? */
/* Recherche une propriété ... */
#ligne {}

D'après mes recherches, la balise "hr" est élément en block...
J'ai testé plusieurs propriété, comme display ou position, mais je ne les maîtrise pas, ce qui est le objectif...

J'ai remarqué que si je supprime la propriété "float" de la classe "box", le hr passe à la ligne, mais c'est vilain, je continue ma recherche...

Pourriez-vous m'aider s'il vous plaît ?
Merci !