Yahoo! UI Library: Grids CSS を参考にさせて頂きました。

 Yahoo! UI Library: Grids CSSが気に入ったとか何とか言っていたのだけども、3段カラムは嫌いで要望がない限りは2段しか使わないしって事で私レベルだとオーバースペックな事にやっと気が付いたり、フォントを指定されたりサイズを変えられるのもヤッパリ嫌いだし、でもリセットってのは良いねと思ったりしたので、結局参考にして身の丈レベルのを書いた。

 Yahoo!さんのreset.cssをインクルードし、なおかつ標準準拠モードで

<div id="base" class="type名">
    <div id="headerBox">
    </div>
    <div id="mainBox">
    </div>
    <div id="sidebarBox">
    </div>
    <div id="footerBox">
    </div>
</div>

 みたいなHTMLを用いて、

body {
    text-align: center;
}

#base {
    width: 750px;
    *width: 732px; /* IE */
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.type1 #sidebarBox, .type3 #sidebarBox, .type5 #sidebarBox,
.type2 #mainBox, .type4 #mainBox, .type6 #mainBox {
    float: right;
}

.type2 #sidebarBox, .type4 #sidebarBox, .type6 #sidebarBox,
.type1 #mainBox, .type3 #mainBox, .type5 #mainBox {
    float: left;
}

.type1 #sidebarBox, .type2 #sidebarBox {
    width: 24%;
    min-width: 180px;
}

.type3 #sidebarBox, .type4 #sidebarBox {
    width: 32%;
    min-width: 240px;
}

.type1 #mainBox, .type2 #mainBox {
    width: 74.6%;
    min-width: 560px;
}

.type3 #mainBox, .type4 #mainBox {
    width: 66.6%;
    min-width: 500px;
}

.type5 #sidebarBox, .type6 #sidebarBox,
.type5 #mainBox, .type6 #mainBox {
    width: 49.3%;
    min-width: 370px;
}

#footerBox {
    clear: both;
}

 ていうCSSを適用させると、type1で160pxのサイドバーが右に表示されてtype2でその逆。type3で240pxのサイドバーが右に表示されてtype4でその逆。type5で370pxのサイドバーが右に表示されてtype6でその逆。全体の横幅750pxでセンタリングされ、サイドバーとコンテンツ部の間に10px程度の隙間が入り、上部にヘッダー、下部にフッターが表示される。
 Windows IE 5.5辺りは環境を持っていないので確認していないけれども、Yahoo!さんのgrids.cssをみるに横幅を若干小さめにしている様なので、「おかしくなるのだろうなぁ」と想像に難くない。が、一応センタリングする指定だけ残しておいたりして。

 せっかく書いたので、当ページにもそのうち適用しようかなと思ってはいる。

ーー追記:2006/10/07ーー
 気が変わって更にyuiくさく、と言うかほぼそのままだなぁ。