Images dont float right next to contact form css - html

Question

For a school project a need to make a website. I have a contact form page and to the right I want three images. See picture for how it looks now. The images float under the form and not on the right of it. Here is some html and css code:
#contact-img1,
#contact-img2,
#contact-img3 {
width: 20%;
height: auto;
float: right;
}
#contactform {
width: 70%;
height: 500px;
float: left;
}
.shoes {
float: right;
}
<fieldset id="contactform">
<legend>If you have a question you can ask it here:</legend>
<p> <label for="name">Name:</label> </p>
<input type="text" name="name">
<p> <label for="email">Email:</label> </p>
<input type="text" value="placeholder#gmail.com" name="email">
<p> <label for="message">Message:</label> </p>
<input type="text" name="message">
<p>
<form action="contact.html">
</p>
<input type="submit" value="send question!" />
</form>
</fieldset>
<section class="shoes">
<aside class="img-inno1">
<img id="contact-img1" src="images/inno-img1.webp" alt="first sport image">
</aside>
<aside class="img-inno2">
<img id="contact-img2" src="images/inno-img2.webp" alt="second sport image">
</aside>
<aside class="img-inno3">
<img id="contact-img3" src="images/inno-img3.webp" alt="third sport image">
</aside>
</section>

Answer 1

Floating an element allows content that follows it to bubble up beside it.
It does not cause the floated element to bubble up beside content before it.
To get the form next to the images using floats you would need to either:
Change the source order
Float the form instead of the images
That said. The point of float is to achieve this sort of effect (as shown in the CSS specification):
Using them to make blocks of content site beside each other is a hack.
We have Flexbox for that type of layout now.

Answer 2

Try this
.shoes {
float:right;
width:20%;
}
.shoes aside {
display: inline-block:
}
.shoes img {
max-width: 100%;
}