I want to put the two boxes under each other - html

Question

i want this result :
and this is my HTML code:
<style>
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
float:right;
height: 100px;
}
.red_box {
border:15px solid red;
padding : 1.3em;
width:min-content;
height:min-content;
margin:1em;
}
</style>
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>
to put the 2 boxes ander each other.

Answer 1

You can use flexbox using align-items: flex-end with flex-direction: column
section {
display: flex;
flex-direction: column;
align-items: flex-end
}
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
height: 100px;
}
.red_box {
border: 15px solid red;
padding: 1.3em;
width: min-content;
height: min-content;
margin: 1em 0 1em 1em;
}
<section>
<div class="blue_box">blue</div>
<div class="red_box">red</div>
</section>

Answer 2

You are almost there. You can clear any floated element by using:
clear: [left | right | both]
To create your desired output, you only need to add two styles to your .red_box:
float: right
clear: right
Working Example:
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
float: right;
height: 100px;
}
.red_box {
float: right;
clear: right;
border: 15px solid red;
padding: 1.3em;
width: min-content;
height: min-content;
margin: 1em 0 1em 1em;
}
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Answer 3

You can use position property.
<style>
.blue_box {
border: 10px solid blue;
padding: 0.5em;
width: 150px;
/* float:right; */
height: 100px;
}
.red_box {
border: 15px solid red;
padding: 1.3em;
width: min-content;
height: min-content;
margin: 1em;
position: fixed;
left: 106px;
}
</style>
<div class="blue_box">Hooray, a box!</div>
<div class="red_box"></div>