(Look at the final solution below)
I have a puzzle in my mind, and although I think it might be impossible, I trust the brilliant minds on Stackoverflow to help me out. I have container-div elements that contain one or more child-div elements. These containers are essentially "virtual" and serve as a grouping for their children. Since the number of children in each parent is unknown, I cannot use a fixed width. I want these elements to float gracefully when the window is resized.
My objective is to display the same number of child-divs in each row regardless of which parent they belong to. The issue I'm facing currently is that using float causes the entire parent container to wrap. So, my question is, is there any way to "saw" a div like this:
Before
After
Does that make sense? Here is where I am stuck at the moment:
After many attempts with the help of Gaby aka G. Petrioli (thank you!), I finally cracked the code and came up with this solution: http://jsfiddle.net/5FXBu/11/