Hello, I am a beginner in HTML and CSS and I am facing an issue with the positioning of blocks on my webpage. Can anyone provide guidance? Here is what I am trying to achieve:
The first block should be aligned to the left, the second block to the right, and the third and fourth blocks should appear below the second one. Currently, they are all displaying in a line. How can I adjust the layout so that blocks 3 and 4 are positioned beneath the second block?
.body {
width: auto;
}
.box {
display: inline-block;
vertical-align: bottom;
}
.box-1 {
background-color: rebeccapurple;
width: 300px;
height: 300px;
float: left;
}
.box-2 {
background-color: brown;
width: 400px;
height: 100px;
vertical-align: top;
/* margin-left: 40px; */
}
.box-3 {
background-color: chartreuse;
width: 200px;
height: 200px;
}
.box-4 {
background-color: coral;
width: 200px;
height: 200px;
}<div class="section">
<div class=" box box-1"></div>
<div class=" box box-2"></div>
<div class=" box box-3"></div>
<div class=" box box-4"></div>
</div>