.useless {
float: right;
clear: right;
border: 1px dashed blue;
height: 50px;
width: 100%;
}
div.pretraga {
border: 3px groove red;
width: 20%;
float: right;
margin-right: 5%;
border-top: 0;
display: flex;
justify-content: center;
height: 250px;<div class="pretraga">
<div class="useless">
</div>
<div class="useless">
</div>
</div>I'm facing an issue with two divs inside another div that are not displaying as block elements. Instead of stacking vertically, they appear inline next to each other. I've set width and height for the larger div and dimensions for the smaller ones. All three have display:block specified. I've tried using float, but it didn't work. Clear together with float also did not solve the problem. The only workaround is giving them position:relative, which isn't ideal.
As a beginner, I find it puzzling why they behave this way. Can you explain the underlying cause of this behavior and provide insights into how to resolve it without just providing code snippets?