HTML/CSS List image issue - html

Question

I have put a picture in the HTML code which is inside a ul/li list now what happens is that the picture gets the correct description on the right however the next bullet point is also next to the picture which i want to avoid ... (see example image below )
The coding for this I used is :
<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's 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 :
img {
float: left;
height:90px;
width:75px;
margin: 5px;
padding-bottom: 10px;
padding-right: 5px;
overflow: hidden;
}
Example:

Answer 1

In case the two ul elements are really what you need: You can just clear the float on the ul elements:
ul {
clear: both;
}
This way, the existing float from the image ist stopped and not affecting the next list anymore. See MDN for more information about the clear property.
Normally you would just use one list ul with multiple list items li. See #BDawg's answer for this.
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's 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 :

Answer 2

The CSS property you are looking for is clear: both;
Also, your HTML isn't structured semantically - that is, the meaning of the code doesn't make sense. You have a list of figurines, so there should only be one single <ul> list. See the snippet below for a better example of HTML structure.
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's spell—air, earth, fire, or water magic, and can resist magical attack more effectively. His starting weapon is a short sword.</p>
</li>
</ul>