I mentioned earlier that CSS makes each object responsible for how it flows in the layout rather than making the container responsible. So, what can be done?
Take a look at this very site. All of the widgets on the left are floating over there. If you narrow your browser window (or bump up your text size), they will eventually fall into a single column. Narrow further and they will fall below this text.
That’s 80% of what I wanted out them. There are weird artifacts though caused by the different widget sizes. To accomplish this, I not only had to float each widget, but I had to float the main column as well.
What I really wanted was a container that would flow things for me instead making me flow each item (poorly). It seems I should be able to specify a container that adds objects top-to-bottom-then-left-to-right keeping the minimum needed height for any addition. So, in adding a <div> to this container it would:
- insert it below the last inserted item if it need not lengthen itself to do so
- otherwise, insert it to the right of the last items as high up as it will go if it need not widen itself to do so
- otherwise, lengthen itself enough to place it below the rest of the contents
It may be as simple as preferred-width and -height attributes on the container, a flow-order: top-bottom-left-right;, and judicious use of maximum-width and -height.
Nobody’s Perfect
This wouldn’t solve every fluidity problem one might like to tackle. But, it would make many of them much simpler. No one would ever switch apartments if each piece of furniture got to say where it belongs on the moving truck.