絶対配置した段組みレイアウトの高さの調整を行うには？

リキッドレイアウトのCSSなレイアウトにおいて、floatプロパティでもって段組みレイアウトするために、ネガティブマージンの手法を利用する人が結構いると思いますが、Expression Webでは残念ながら「ネガティブマージンを使ったCSSは対応していない、バグではなく仕様だ」というMSからの回答が来ています。

つまり、Expression Web 2のデザインビューでの編集に対応するためにリキッドレイアウトで段組みレイアウトするには、positionプロパティで相対配置「position:relative」と絶対配置「position:absolute」でもって配置するしかない、ということです。

すると、コンテンツの高さよりサイドバーの方が高い場合、フッターがサイドバーに隠れてしまいます。そこでのCSSハックとして、min-heightプロパティでもって、段組みを囲っているコンテナのdivにスタイルを適用しておくといいでしょう。

しかし！ min-height プロパティって、IE6では対応できないんですよね・・・。

それで検索した結果、以下の記事が見つかりました。

CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html

もし、サイドバー（#sidebar）の高さが600ピクセルあれば、段組みを囲っている、相対配置されたコンテナのDIV（ここでは #container とします）に対しては、以下のように記述します。

#container {
	padding: 0px;
	margin: 0px;
	position: relative;
	width: 100%;
	min-height:600px;
	height:auto !important;
	height: 600px; /*ここでIE6用の最小の高さを指定 */
}
#contents {
	padding: 10px;
	margin: 0px 180px 0px 0px;
}
#sidebar {
	margin: 10px 5px 0px 0px;
	width: 250px;
	position: absolute;
	top: 0px;
	right: 0px;
}

min-height プロパティとか、!important とかは、Expression Webの[新しいスタイル]とかのダイアログボックスでは設定できません。CSSファイルに直接編集してください。まあ、いまさら感があるかもしれないですけどね・・・orz

しかしこれをするとなぜかレンダリングがうまくいかないですね・・・
どうやら height: 600px の方が評価されて、height: auto !important; が無視されるようです（これも仕様って言われそうだ・・・涙）

Webページ編集中は緑色の部分をコメント扱いにした状態で対処するしかなさそうです。

でもこれって、!importantの後で同じプロパティに別の値指定するとIE6ではimportant無視するバグを利用したものですよね？
# とすると、Expression Web 2のレンダリングはIE6に似てる･･･のかな？

・・・一応、IE6、IE8Beta2、Firefox 3で表示確認済みです♪