Can we force a div element to "wrap" by css?

Question

(Final solution below)

---

I'm pretty sure it's not possible the way I imagine it, but there are so many smart, clever and gentle people on Stackoverflow, I'll give it a shot.

I have container-div elements which get filled with one or more "child-div" elements. The containers are more or less "virtual", actually they only should show which children belong together. Since I don't know how many child's are placed within each parent I cannot work with a fixed width. Those elements should be able to float to handle window resizing gracefully.

My goal is, to display the same amount of "child-divs" in a row regardless in which parent-div they are. My current problem is, that the float causes the whole parent-container to wrap, so the question is, is there any possible way to "saw" a div, like this:

Before

After

Does that make any sense ? Here is my current playground:

http://jsfiddle.net/5FXBu/

---

After lots of experiments together with Gaby aka G. Petrioli (thanks dude), I finally created this solution: http://jsfiddle.net/5FXBu/11/

Answer 1

If the container-div are just for grouping and have little effect on the graphical design you can just set them as inline. Setting the child-div as inline-block allows to pass some of the layout requirement of the container-div to the child-div (margins mainly..)

example at http://jsfiddle.net/gaby/pvWHr/