Trouble Using Floats To Mimic A Table Layout With Different-sized Objects

I'm trying to create a table-less layout using floats, but I'm having trouble getting small objects to float on both sides of larger objects. Is this possible? Here's a visual of w

Solution 1:

If you want to be able to add new elements on the fly, you should consider using a javascript solution for this problem.

Here's a good one. http://masonry.desandro.com/

Solution 2:

float: right on the small boxes, and float: left on the large one. Worked here

Solution 3:

Have you considered using display: inline-block; instead of floats? Seems to work fine for me.

Solution 4:

You could use a combination of absolute positioning on the pink box (taking the box out of the flow, so it won't affect the floating blue boxes), and jQuery (to add the necessary space). This solution will only work however, if the pink box is the 3rd child.

http://jsfiddle.net/yjmdz/

EDIT: this seems to be working only on Chrome, I'm still figuring out what's happening..