Problem with floating CSS containers with variable width

Question

Hi,

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

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

Inside the third container there are 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.

Answer 1

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.

Answer 2

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.