idでページ内リンクと2段組みの高さ合わせの技について

併用すると、ページ内リンクを使ったページのコンテンツ表示が、id属性の及ぶ範囲しか表示されなくなる。
position:absolute の指定があるタグは助かる?


例えば、

	<div class="wrapper clearfix">
		<div class="block_left">
			<p id="item01">...</p>
		</div><!--/block_left-->
		<div class="block_right">
			...
		</div><!--/block_right-->
	</div><!--/wrapper-->

というhtmlソースで、
cssの段組み部分は、

	.block_left {
		float: left;
		width: 68%;
	}
	.block_right {
		float: right;
		width: 30%;
	}

というような構成では、
通常、block_leftとblock_rightの高さは、コンテンツの高さが同じにならなければ、合わない。
なので、両方の段を区切る線を、どちらかのdivにborderで指定すると、
コンテンツの高さが短い方に指定してある場合は、途中で途切れてしまう。


途中で途切れないようにするために、両段のコンテンツの差が誤差となるくらい高さを確保してやって、
overflow: hiddenで隠す、という技がある。
こちらを参照:

[CSS]高さの異なるカラムを揃えるスタイルシート | コリス

例えば、こんな感じ。

	.wrapper {
		overflow: hidden;
	}
	.site_left,
	.site_right {
		margin: 0 0 -32768px
		padding: 0 0 32768px
	}

この設定がある状態で、
ほかのページから、#item01付きでリンクをはると、遷移したときに、
item01の領域がページの上端にくるように表示される
(スクロールして表示されるのではなく、item01より上のコンテンツが表示されなくなる)。
ソースを確認すると、見えなくなってしまった部分も含まれている。
IE6では再現せず(id属性によるページ内リンクが使えないから?)。

	overflow:hidden

をはずすと解消されるが、下マージンが-32768px分のスクロールバーが出る。


この方法を使わない場合、両段の区切り線は、
画像で作って、wrapperの背景画像に指定する。
x方向の位置は、site_leftのwidthと同じに。
%指定ができるので、リキッドレイアウトでも可。