css alignment?

I don't have much experience with CSS, but I've read the tutorials.  Maybe
I'm wrong, but it seems that there's no good way to do alignment.  Like,
things that people prefer to do with tables, because it Just Works, even
though the CSS community chastizes people for that.

For example let's say I have two divs in a left column, and one on the
right.  (maybe the two left div's are within a larger div, and the larger
div and the right div are float:left.)  Now I want the right div to size
itself just as tall as necessary to go down exactly as much as the two left
div's do.  (say i have a background and pretty borders and stuff.  using
absolute positioning and sizing  for this kind of stuff (alignment-related)
isn't very dynamic; it has to be changed every time content changes and
changes the sizes of things, to make things match.

I tried an experiment (hope this e-mails okay):

<pre>&lt;html>&lt;body>
&lt;div>
  &lt;div style="height: 100%; background-color: red; float:left">
    this&lt;br/>
    is&lt;br/>
    a&lt;br/>
    test
  &lt;/div>
  &lt;div style="background-color: blue; float:left">
    hi
  &lt;/div>
  &lt;div style="height: 100%; background-color: green; float:left">
    foobar
  &lt;/div>
&lt;/div>
&lt;/body>&lt;/html></pre>

(please ignore my lack of proper doctype, etc.)

hoping that would do the trick.. it didn't.  wouldn't it be nice if it did?
(i was hoping that the left and right divs would both size themselves to
100% of the available height of the outer div, while the outer div
auto-sizes itself to the minimum size necessary to accomodate the contents
of both the left and right div's.)

that would be a simple solution and not even requiring any extra syntax, but
i thought of a whole new system that could improve on this ability.
basically some sort of alignment commands for CSS, which allow you to align
certain things (left/right/top/bottom border/margin/content edge) with
certain things of other elements.  for example you could align an element's
left and right margins with another element's left and right margins, the
other element being referenced by its id attribute.  then additionally you
could move it left/right from that spot with relative positioning (using the
normal relative positoning syntax) if you wanted.

i would imagine aligning a left margin with a left margin would require a
briefer syntax then aligning a left margin with, say, another left border.
or another *right* margin.  (with the briefest syntax would it align only
the margin by default, or margin, border, and content edge?)  for example
maybe "align-left-border: someid" to align the left border with someid's
left border, or "align-left-border: someid/right" to align left border with
someid's right border, or "align-left-border: someid/right/margin" (obvious
meaning), or "align-left-border: someid/margin" for someid's left margin, or
"align-left:someid" to align left margin with someid's left margin (or left
margin/border/content-edge?)

of course you don't always want to just align one thing with another,
because hwat if the sizes of both things are dynamic (auto-generated or
frequently modified) and you're not sure which will need more space, but you
want both things aligned (like in my html code above, only you don't know
which div will be taller).  in that case i think the simplest solution would
just be to align all the things you want to align with eachother to a common
id attribute which doesn't actually refer to an existing element.  but not
to make things confusing, such ad hoc referents should probably be
distinguished somehow from actual id's, for example by prefixing with a
certain character.

i wrote more about this in my blog at http://inhahe.blogspot.com (after my
ramblings about a few other things which may not be actual issues).