2 つの空要素（div）をコンテンツの前に配置する

ここがちょっとスマートではない部分です。が、IE6 で、CSS のみで max-width を実現するためには目をつぶりましょう。
下記の 2 つの空の div 要素を、コンテンツ（今回のサンプルの場合はclass="content" の部分）の直前に配置します。

まず最初の div を、幅が 50% で左に float させます。そしてさらに、コンテンツの幅の半分のネガティブマージンを float とは逆方向に取ります。（今回の場合はmargin-right: -450px） CSS は以下の感じ。

続いて、2 番目の div を上記の設定と逆にします。

ネガティブマージンをはずすと・・・？

なぜ、ネガティブマージンが必要なのでしょうか。
実際にはずして見てみると、以下のような感じになります。

見たことがある人は見たことがあるかもしれませんが、左右にフロートされている要素に続いて、テキストを配置すると、フロートの隙間にテキストが流れ込みます。それと同じような感じですね。

overflow の設定で float が clear されているのでそのような状況になるようです。
さて、ここでネガティブマージンを元に戻してみましょう。
すると、ネガティブマージン分コンテンツの幅が確保されます。

ネガティブマージンが max-width の正体

実は、これがもう max-width の正体です。（IE6 向けにまだいくつか設定しないといけないスタイルがありますが）
つまり、幅 50% の div 2 つによって本来はコンテンツの入り込む余地がないところへ、ネガティブマージンを使うことで無理やりコンテンツが収まる範囲をこじ開けた、というイメージですね。

これにより、IE6 でも max-width として幅が確保されるわけです。
そして 50% ということは、ブラウザの幅に追従するということ。
なので、ブラウザを小さくしていくと、ブラウザの幅が無理やりこじ開けた幅より小さくなるため結果的に縮小していく、というわけです。

これでモダンブラウザ向けには問題なく max-width と同じ効果が得られます。（ただ、モダンブラウザ向けだけならそもそも max-width を指定すればいいので今回のテクニックは意味がないのですが）

IE6 向けには少々細工が必要

続いて IE6 向けに少々細工をします。それが以下の指定です。

最後に指定しているのは、それぞれ微妙に異なる IE6 の挙動を制御するためのものです。
まず最初に.contentに対してfloat: leftを指定します。これを追加しないと、横幅がブラウザの表示領域いっぱいになってしまいます。

続いて、.content 内の.innerに対して上記 2 つのプロパティをしています。これを指定しないとネガティブマージンでこじ開けた幅いっぱいにならなくなります。また、overflow を省くと縮小時、若干の横スクロールが発生してしまうので、これを発生させないための処理です。

簡単ですが、これらを設定することで IE6 でも CSS のみ（＋ HTML に細工）で max-width を実装することができます。