Problem with floating CSS containers with variable width

I have 3 floating containers of unknown width. The surrounding container has a fixed width.

-------------
| X | X | X |
-------------

Inside the third container there a开发者_运维百科re again floating elements:

---------------------------
| X | X | X [ O | O | O ] |
---------------------------

What happens when these elements execeed the width of the surrounding container is that single elements will drop into a new line (which is quite fine and expected behavior):

-------------------------
| X | X | X [ O | O | O |
  O | O ] |
-------------------------

But what I want is that the float child elements are indented like this:

---------------------------------------------------------------------------------
| X | X | X [ O | O | O |
              O | O ] |
---------------------------------------------------------------------------------

Has anyone a CSS only solution to this problem? Should work in IE6 too. I tried many things but got lost in float.

Try this example to reproduce your problem. I can't even get the behaviour you are describing, are there really only floats there?

If the column-elements are floating without width, then every float will just expand with it's content, and when it doesn't fit in the container, it'll drop down (the whole element). Without setting the width of these column-elements, there is not a lot you can do about it css-wise.

I'm not sure about all the tricky consequences right now - maybe show the code in a JSFiddle for people to play around with? - but the best solution that comes to mind # will probably be another wrapper around the three O s that floats left as well.