I'm attempting to fit these divs together like a jigsaw puzzle. My goal is to position div 4 between div 1 and 3. Currently, div 4 starts below div 3. What would be the solution to make the divs seamlessly fit into each other?
<div style='overflow:hidden;width:500px;'>
<div style='float:left;width:200px;height:400px;border:1px solid #707070'>1</div>
<div style='float:left;width:200px;height:300px;border:1px solid #707070'>2</div>
<div style='float:left;width:200px;height:400px;border:1px solid #707070'>3</div>
<div style='float:left;width:200px;height:300px;border:1px solid #707070'>4</div>
</div>
I prefer not to rely on position absolute. The code shared here is just an example. In reality, the code exists within a loop and the size of content varies dynamically.