How can I align the image to the right? - html

Question

I want my image to float to the right. But if I use the float: right; write a command, it also takes the section with it. See image. The picture is already so far to the right because it is so big. (the rest is transparent).
#second {
background-color: black;
}
.orange {
height: 10px;
background-color: #F54703;
}
#secondBild {
float: right;
}
<div>
<section id="first">
<img src="bilder/Oben_rechtsunten.png">
</section>
<section class="orange"></section>
</section>
<section id="second">
<img src="bilder/Seite_unten.png" id="secondBild">
</section>
<section class="orange">
</div>

Answer 1

I'm assuimg when you state 'it takes the section with it' means that you want the section with id = 'second' to occupy the space and image within it to be pushed to the right. To do this you can set the wrapping div to display: flex then use flex-grow to cause the second section to expand. To move the image to the right within section 'second' you use margin-inline: auto 0; You also have to make the image a block element too. If that's not what you're looking for drop me a comment and I'll edit.
Fully marked up html & css below
div {
display: flex;
}
#second {
flex-grow: 1; /* added this */
background-color: black;
}
.orange {
height: 10px;
background-color: #F54703;
}
#secondBild {
/*float: right;*/
margin-inline: auto 0; /* added this */
display: block; /* added this */
}
<div>
<section id="first">
<img src="https://www.fillmurray.com/200/200">
</section>
<section class="orange"></section>
</section>
<section id="second">
<img src="https://picsum.photos/200" id="secondBild">
</section>
<section class="orange">
</div>

Answer 2

Oh I found a way. I just put the image in the background, like this:
#first{
background-color: white;
background-image: url(bilder/Oben_rechtsunten.png);
background-position: right;
background-size: contain;
background-repeat: no-repeat;
height: 1000px;
}

Answer 3

The float property removes the element from the normal flow of the page,
so the block parent won't wrap the floating content. You can solve this by adding display: flow-root to the parent element to wrap its floating contents. Refer to Block formatting contexts for detailed information.
#second {
display: flow-root;
}
#secondBild {
float: right;
}
Another easy solution if you don't want to use float is adding text-align: right;
to the parent element.
#second {
text-align: right;
}

Answer 4

#img-container {
display: flex;
align-items: right;
}
Use `display: flex;` and `align-items: right;`
<div id="img-container">
<img src="#" id="image">
</div>