リファラから拾ったChepooka::cssでfloatの振る舞いにトラブってる感じだったので、はてなダイアリーでもうちのサイトみたいなのできないもんかと移植してみました。こちらのエントリの内容は気にしてはいけません。
あるボックスの内容物がfloatされているボックスのみの場合、そのボックスの枠線や背景色、背景画像は内容物の高さに合わせて自動的に高さが調節されないというfloatによるレイアウトでまず間違いなく遭遇するトラブルをどうやって解決するかということになります。
うちのサイトではhtmlとbodyでそれぞれ背景画像を指定することによって、2カラムのベースを作成し、ヘッダやコンテンツの背景画像をその上に重ねることによって、上記トラブルを解決せずに擬似的に実現しています。が、はてなダイアリーではhtmlに背景画像を仕込むのは不可能らしいので別のアプローチが必要になります。
そこで、QuirksMode - CSS - Clearing floatsで詳しく解説されている、overflowを利用したテクニックを利用してみました。このテクニックは、内容物がfloatされているボックスのみのボックスに、
div#container {
width: 100%;
overflow: hidden;
background-color: #f0f;
}と指定すると、内容物の高さに合わせてきちんと背景色で塗りつぶされるというモノ。
はてなダイアリーでは、
<body>
<table>
<!-- はてなのヘッダ -->
</table>
<h1>ダイアリーのタイトル</h1>
<div class="hatena-body">
<div class="main">
<!-- 本文 -->
</div>
<div class="sidebar">
<!-- サイドバー -->
</div>
</div>
</body>という構成になっているので、div.hatena-bodyに上記のような指定をしてやれば、本文とサイドバーの長さに関わらずキレイに下まで背景色や背景画像で埋めることが出来ます。
上記の僕のはてなダイアリーでは、本文があまりにも短すぎたりとか何とか色々あって、微妙なところで不具合があったりしますが、ベース的にはあんな感じでいけると思います。もうこれ以上はやる気はないんですが。