はてなのサイドバーを左側に置く方法がわからない

日記 技術

XBOXのゲーマータグを表示するついでに、デザインも変更してみた。
が、どうも本文が左、サイドバーが右という配置に違和感を感じる。
このテーマだと本文が全体的に左寄りになるからそう感じるのかも。


とりあえずサイドバーを左に置けばいいやと思って四苦八苦してみたものの、これがサッパリ上手くいかない。
スタイルシートでナントカしようとするものの、基礎知識が皆無に等しい俺がコードをいじっても大変なことになるばかり。


色々調べるとどうやらfloatという概念が重要らしいという事だけわかった。
というかCSSのSpecは少し読んだぐらいじゃサッパリわかりませんね！俺の頭の悪さもありますが！
視覚的な規格を文章で表現する困難さが良く分かる。
この感覚は、あれだ、「プログラミングしたいんです！」とか言ってる人に「The C++ Programming Language」(Bjarne Stroustrup著)を投げつける感じ。


検索すると他にもCSS絡みの大量に情報が見つかるんだが、大量すぎて初心者にはどれが正しいのか選別できない。
正しいコードを覚えないとモヒカンのハンドアックスで頭カチ割られそうだし…
あと「はてな サイドバー CSS」とかで検索してもはてなキーワードやブクマタグが検索上位にきて有効な情報が抽出できません！罠すぎる！


と言う訳で誰かお助けを。
ちなみに今のテーマのCSSはこれで、俺が追記したコードは以下のとおり。

.main {
	float: right;
}
.main div.calendar, .main div.day{
	margin-right: 0;
	margin-left: 235px; }
.sidebar { 
	float: left;
	margin-left: 0;
	_margin-left: 0;
	*margin-left: 0;
	margin-right: 221px;
	_margin-right: 220px;
	*margin-right: 220px;
	border-left: 0;
	border-right: 1px solid #56575f;
}

見て分かるとおり、左右反転してマージンの正負をひっくり返しただけ。
なんだが、これだと本体(mainブロック?)の左に空白があいて、本体が終わった下側左にサイドバーが位置してしまう。
元ソースみると本体のwidthが100%なんで、元のコードは
「本体の枠の右側に空白部分をdiv.dayで作成し、その位置にsidebarを『浮かして』いる」
という仕組みじゃないかと推測。
こういう変な表示されるのは各要素の解釈にも優先度があるって事なのか。
規格かっちり読むか…


追記:
ここらへんの解釈に引っかかってるのかな。

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.


Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
9.5.1 Positioning the float: the 'float' property

というか「earlier in the source document」と言われても、追記タイプのCSSで順番入れ替えなんてどうすりゃいいんだろ。