.content {
width:500px;
float:left;
padding:10px ;
border-right:1px solid #999; /*same color and same width*/
margin:0 0 10px 0;
}
.sidebar {
width:300px;
float:left;
padding:10px;
border-left:1px solid #999;/*same color and same width*/
margin:0 0 10px -1px;/*this is the illusion part, the two borders will overlap eachother because of the negative margin, so if the content grows, the border of the content will grow and if the sidebar grows the border of the sidebar will grow */
}

And, unfortunately, tables can’t do that either (nor can they do a lot of things from the accessibility PoV, because, well, they aren’t flexible). One of CSS’s main plusses is that you don’t need to always edit the HTML to get something to display differently. Yes, tables are useful, but they also mean you have to change something if you want that sidebar to display on the left instead of on the right.
(Also, from an accessibility PoV, what comes first should be first in logical order, i.e. sidebar before content, screen readers rely on that.)

Other ideas… http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/

CSS was designed so that, really, all you would need is a containing block and height:100% (or inherit). That it isn’t supported, alas, is the bane of everything.

There are things that can be done with DIVs, and situations where DIVs work great, but we have to face it. If you want to create a layout with no hacks, tables are the best.

I think a wrote a post about this some months ago:
http://www.codigomanso.com/en/2009/02/should-i-use-tables-for-layout/

Anyway, is like the problem you mentioned with Fibonacci. You can use recursion, but, seriously, if you plan to compute more than the 30th number, what you have to use is a “for”. Even if you want only the 10th number.

Really interesting blog, I’m really enjoying it!

I have updated the code to address your concern.