スタイルシートの疑問

はてなダイアリは「div.hatena-body」の中に日記の中身が記述される仕組みになっていて、この前の部分に「h1」で指定するタイトル、後ろに「div.footer」があります。
そして、設定画面のヘッダとフッタは「div.hatena-body」の前後に埋め込まれます。
うちのサイトみたいに左右に画面を分割する場合、設定画面のヘッダとフッタを使って「div.hatena-body」の中に「div.main」と「div.sidebar」を作るんですが、ここに問題が発生するのです。
位置指定をするために世間様では、「position」っていうスタイルが用意されています。当然、画面分割にはこのスタイルを使用するんですが・・・。とほほのスタイルシート入門に記載されるやり方で、下のように記述するとします。

div.hatena-body {
　position: relative;
}
div.main {
　position: absolute;
　top: 0; left: 0;
　width: 60%;
}
div.sidebar {
　position: absolute;
　top: 0; left: 60%;
　width: 40%;
}

するとです。「div.footer」で表示されるべき部分は「div.main」要素や「div.sidebar」要素で表示される部分と重なってしまうわけです。
なんとなく「position」要素で回避できないかなぁ、と思っていろいろ試してみたんですけど、どうもうまくいかないのです。当然 main か sidebar のどちらかの absolute 指定を解除する*1ことで、その下に表示させることは可能ですが、解除した側が短ければ、長いほうと footer が重なってしまいます。どちらか長いほうの下に表示させる方法って、どうすればいいのかなぁ・・・?

*1:つまり static を指定する。