CSSの記述順序は関係ないと思いますよ（＾＾；）。
おっしゃりたいのは、変則３カラムで、左端と真中のカラムの上にヘッダが乗っかっていて、右端のカラムだけ画面の天辺から下までぶち抜き、ということですかね？
そうだとすると、
<div id="left">
<div id="head">---</div>
<div id="left-left">---</div>
<div id="left-right">---</div>
<br style="clear: left; line-height: 0px;" />
</div><!--id="left" end-->
<div id="right">
---
</div><!--id="right" end-->
というのが分かりやすいかと。
細かいところは割愛させていただきますが、
まず左右２カラムで枠を作り（私のソースのid="left"とid="right"です）、さらに左カラムの中を分割する方法です。
右カラムは、太郎さんのCSSの「#right」をそのまま使えると思います。
左カラムの中は、ヘッダと、その下に太郎さんがおっしゃる「left」（私のソースのid="left-left"です）と「center」（同id="left-right"）を記述します。
注意する点は、左カラムの中もfloatなので、どこかで「clear: left;」を入れる必要があることです。
これを入れることで、一旦、左カラムの分割を閉めておきます。これによって次に来る「id="right"」は「id="left-right"」の隣でなく、「id="left"」の隣にやってくるわけです。
当然高さは「id="left"」と揃いますので、見た目にはヘッダのトップと右カラムのトップが同じ高さで揃うことになります。
clear: left;は、#rightの中にでも付け加えれば大丈夫だと思いますが、あえて＜ｂｒ＞にスタイル属性を設定して見えるようにしてあります。
以上は私のサイトでも実際に使っている方法です。
ただしこのシート、問題点があり、私のソースで言う「id="left"」に背景色や枠線を入れると、IEで表示バグが出るはずです。
恐らくFireFox、Operaでは問題ないと思いますが、Safariは確認していません。
左カラムの中の、「id="head"」「id="left-left」「id="left-right"」に個別に背景色、枠線を入れることは可能でしょう。
同じくIEでの問題点は、「id="left"」にmargin-bottomの数値を入れても反映されません。これもIEだけの表示バグだと思いますが、下辺にマージンを取りたいときは、「id="left-left"」か「id="left-right"」にマージン設定するか、「id="left"」に「padding-bottom」を設定することになるかと思います。
いずれにしても、IEでの表示バグは致命傷なので（IE利用者の数から言って、です）、左カラムの分割をスタイルシートではなくテーブルタグにしてしまうのもありでしょう。
あとはpositionを併用する方法もありそうですが、私にはわかりませんのであしからず・・・。
あと、気にしない方はそれで構いませんが（私は気にしないのですが）、floatプロパティはいろいろつかえますが、検索エンジンのキャッシュでは、表示の崩れが大きくなることがあります。
ブラウザでちゃんと見えていればキャッシュの崩れは問題ないと思うのですが、どうしても気になる方はテーブルタグでガチ固めが安心です。
長々と失礼いたしました。
太郎さんのサイト作りの参考になれば幸いです。 では。。。
