One reason for this behavior is that divs are set to have a default display type of "block", causing them to start on a new line each time. Fortunately, there are various CSS solutions available to address this issue.
My preferred solution would involve using the "float" property.
Here's an example in HTML:
<div id="container">
<div class="fullWidth"></div>
<div class="halfWidthContainer">
<div class="halfWidth green"></div>
<div class="halfWidth blue"></div>
</div>
</div>
And here's the corresponding CSS code:
#container{
width: 300px;
height: 200px;
border: 2px solid red;
}
.fullWidth{
width: 300px;
height: 100px;
background: #aaa;
}
.halfWidth{
width: 150px;
height: 100px;
float: left;
}
.green{
background: green;
}
.blue{
background:blue;
}
Remember, the classes ".green" and ".red" are merely examples for illustration purposes. Also, consider not setting fixed heights for your divs to allow for dynamic content fitting.
If you utilize padding or margins, be aware that they impact the overall width of elements. For instance, adding a 10px padding would increase the total width by 20px (10px padding on both sides), so adjust the element's width accordingly for proper alignment within the container.