I don't know whether I made it clear but one of my motives for
this particular method was its basic simplicity of concept and
its generational potential. The idea being you start with a
nuclear family and keep adding them as children in further
nuclear families to build as many columns as you please. The sort
of thing that has a simple algorithmic base (with the limitation
you point out about having to know longest col). Perhaps it would
be easy to program a wysiwyg to make it all?
In general you need to know more than just the longest col-- you need
all the cols sorted in order of length. Each level of the tree contains
a "leaf" (a single float) and its sibling, another nuclear family or
subtree. At _each_ level the leaf must be shorter than the subtree, for
it all to work.
Sorting the columns in order of height is easy to do approximately,
especially if all they contain is text, but in general it's not possible
without actually laying the page out in a browser following all the
complicated rules for line-breaking, line-box height, positioning and
width and height calculations. And in some cases the final height order
would be affected by the user's choice of viewport width, font size and
family.
The other question is the HTML. The most natural is three divs side by
side for the three columns with maybe an extra wrapper or clearer here
and there to make it work. Going to three levels of nesting is OK but
probably doesn't reflect the "semantic" structure of the document (blah
blah etc.)-- it just reflects the expected order of their final heights.
When trying to do three columns, it's possible to make the container's
height take the maximum height of the three. It's then possible to fake
up a background for each column based on that known container height,
either using borders or background images creatively on the container,
or by sliding in some absolutely positioned divs behind the columns as
in Nik Coughlin's version.
This works because absolutely positioned elements are the only things
whose height can be set to be the same as the automatic height of their
containers: circularity is avoided because a container's used auto
height depends only on its _normal-flow_ descendents (and in some cases
floats), never on the positioned ones.
At the moment your document is about floats and how they affect heights
of other elements. You'd need another chapter about absolute positioning
to link to...
But the background image and border tricks fit in perfectly well with
the rest of the document.
The nuclear family method is a good example for explaining how things
work, so I would leave it in there, explain the height-order problem,
and then go on to some border/background tricks. But of course it's your
doc and it's up to you.
