I am looking for a way to "wrap" different divs of varying sizes, similar to how Microsoft Word wraps text around an image. I have a simplified structure outlined below:
<div id = "div1"></div>
<div id = "div2"></div>
<div id = "bigdiv1"></div>
<div id = "div3"></div>
<div id = "div4"></div>
<div id = "div5"></div>
<div id = "div6"></div>
<div id = "div7"></div>
<div id = "div8"></div>
<div id = "div9"></div>
<div id = "div10"></div>
My goal is to achieve a layout that resembles this: . However, I want it to look more like this: . Simply using float left and right does not give me the desired result as I need multiple big divs to float with small divs in between without white spaces.
If anyone has a solution using Javascript and JQuery, that would be greatly appreciated. So far, I haven't found a satisfactory solution to achieve the layout I envision, and I'm hopeful that someone here can help me achieve my goal.