I am dealing with a unique layout featuring three columns, where the first column includes a sidebar that is floated to the left. The remaining two columns contain product divs also floated left. When the sidebar extends beyond the original product divs, additional product divs generated from an ajax call should wrap beneath it in the first column.
The length of the dynamically created sidebar varies, and I have set up the page to load more content via ajax when scrolling to the bottom. However, the issue arises when the sidebar exceeds the initial product divs, causing the appended content to start below the sidebar instead of wrapping to its right beneath the existing product divs.
Below is my HTML setup:
<div id="rightWideContainer">
<div id="leftNavCol">
<!-- sidebar content -->
</div>
<div class="threeCol">
<!-- product content -->
</div>
<div class="threeCol">
<!-- product content -->
</div>
<div class="threeCol">
<!-- product content -->
</div>
...
</div>
And here is my CSS code:
#leftNavCol {
position: relative;
width: 270px;
float: left;
margin: 7.5px;
}
.threeCol {
width: 270px;
margin: 7.5px;
float: left;
}
When adding new content through ajax, I use this JavaScript snippet:
$(response).find('.threeCol').appendTo('#rightWideContainer');
I have explored various solutions on stackoverflow but none seem relevant to my specific problem. For instance, attempting to hide the sidebar before appending content and then showing it again did not resolve the overlapping issue. As such, I am seeking advice on how to ensure the ajax content continues wrapping adjacent to the sidebar until its end without resorting to temporary hacks. Any suggestions would be greatly appreciated!