Update
The reason I require this specific behavior is to ensure that all my content remains in chronological order, both on the web page and in the HTML structure. This way, even if the layout collapses into a single column on smaller screens, the content still maintains its correct sequence.
1 div --> 1 2 divs --> 1
1 | 2 2 1 | 2 3
3 | 4 3 3 | 4 5
5 | 4 5 | 2
5 4
My website features two columns of content, each occupying 50% of the width. The content is displayed within toggleable boxes that expand or collapse when their headers are clicked on.
When a box on the right side is minimized, the box below it adjusts to fill the space, maintaining proper alignment:
However, minimizing a box on the left leads to a gap between it and the neighboring box on the right, proportional to the size of the adjacent box:
Here's some pseudo code representing the layout:
<div class="full_width">
<div class="box"> <-- box 1
<h1>Heading</h1>
<div>Content.</div>
</div>
<div class="box"> <-- box 2
<h1>Heading</h1>
<div>Content.</div>
</div>
<div class="box"> <-- box 3
<h1>Heading</h1>
<div>Content.</div>
</div>
</div>
Based on my understanding, due to the current HTML structure, box 3 cannot be positioned above the bottom of box 2. Is there any workaround for this issue?
A JavaScript solution would suffice, especially since the problem arises only on pages with JavaScript enabled.
Additional Information
-To witness the issue live on my website, you will need JavaScript and a monitor wider than 1000px as the layout collapses below that width and toggling functionality relies on JavaScript.
-While I could separate the content into fixed columns to prevent these issues, that doesn't align with the desired functionality.