nklein software

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.

I am the one who decides how big to make my browser window. Web sites have a hard time coming to grips with that. There is a mythical minimum browser size.

When I am browsing, I don’t want to have to care.

When I am designing a site, I don’t want the user to have to care.

CSS is my enemy

All of the trouble using floats for columns all spring from a fundamental flaw in CSS:

How items flow with CSS is a property of the object instead of its container.

Now, maybe I am being a bit harsh in calling it a fundamental flaw. For all I know, it was a conscious choice. My guess though is that it seemed natural to people who wrote browsers in the early 90’s (<blink> tags and all).