Layout without tables using CSS

I am playing with CSS to find the easiest way to layout a common disposition of <div>s for a web page.
I need a simple layout made of a header on top (width 100%); in the middle a left part that will hold a tree (say width 25%) and a content part (say width 75%) on the right; a footer at bottom (also width 100%).

Needless to say, it's very easy to obtain this using a <table>, but I wanted to go one step further and use CSS only.

Googling "columns css" returns a lot of stuff, most notably this page, which compares various solutions.

The one I've settled with, since it fits my needs, is this:

<div id="header" style="background:#AAA;">HEADER</div>

<div id="container" style="background: #EEE">

 <div id="left" style="background: #EEE; float:left; width:100px; overflow:auto; border-right:2px solid black">LEFT</div>

 <div id="content" style="background: white; margin-left:100px; border-left:2px solid black">CONTENT</div>

</div>

<div id="footer" style="background:#AAA; clear:both">FOOTER</div>

Nothing special about the header.
The container has the same background as the left, so that if the content expands vertically, then the left column expands as well keeping its background.
The left is floating left with a specified width. The same width is the left margin of content (if you want borders/padding you must tweak the content left margin).
The borders of left and content overlaps (and this really surprised me) to form a unique border.
The background of the body and the background of the content should be the same.
Finally, the footer must be clear:both so that no matter if left or content is higher, it will always stays below.

It works fine in Firefox 1.0 and IE6. If you have feedback about Mac, IE5 and Opera, will be great.