HTML / CSS image issue

Question

I put the image in the HTML code that is inside the ul / li list, now it happens that the image gets the correct description on the right, however the next marker point is also next to the image I want to avoid ... (see example below)

The coding for this I used:

<ul>
  <li><strong>Dwarf</strong></li>
</ul>

<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">

The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>

<ul>
  <li><strong>Elf</strong></li>
</ul> 

The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.

as well as a separate CSS file with:

img {
  float: left;
  height:90px;
  width:75px;
  margin: 5px;
  padding-bottom: 10px;
  padding-right: 5px;
  overflow: hidden;
}

Example:

Answer 1

If ulyou really need two elements : you can just clear the elements float ul:

ul {
  clear: both;
}

Thus, the existing float from the image is stopped and no longer affects the next list. For more information on clear properties, see MDN .

ul li. . @BDawg .

img {
  float: left;
  height: 90px;
  width: 75px;
  margin: 5px;
  padding-bottom: 10px;
  padding-right: 5px;
  overflow: hidden;
}
ul {
  clear: both;
}

<ul>
  <li> <strong>Dwarf</strong>
  </li>
</ul>
<img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without
special equipment. His starting weapon is a short sword.
<ul>
  <li><strong>Elf</strong>
  </li>
</ul>
The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element spell—air, earth, fire, or water magic, and can resist magical
attack more effectively. His starting weapon is a short sword. and also a separate CSS file with :

Hide result

Answer 2

CSS, , clear: both;

, HTML , . , <ul>. HTML.

li {
  clear: both;
}

img {
  float: left;
  height: 90px;
  width: 75px;
  margin: 5px;
  padding-bottom: 10px;
  padding-right: 5px;
}

<ul>
  <li>
    <div><strong>Dwarf</strong></div>
    <img src="C:\Users\690177\Desktop\TEST WEB\images\troll.jpg">
    <p>The dwarf figurine is short, stocky and well armored, carrying a battle axe. He is very good in health, but lacks the attack strength of the barbarian and has no magical abilities. The dwarf also has the unique ability of being able to disarm traps without special equipment. His starting weapon is a short sword.</p>
  </li>
  <li>
    <div><strong>Elf</strong></div>
    <p>The elf figurine is tall and slender, armed with a short one-handed sword. He is equal in attack strength to the dwarf, but is less physically robust. He is also able to use one element spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.</p>
  </li>
</ul>

Hide result