CSSによるレイアウト変更

ブログのレイアウト変えてみたのでメモ。
1カラムにしたかったのだが、サイドバーにあるモジュールだけ横並びにしたかったのでちょっと手こずった。
どこがどういうid名、class名なのかはFirefoxのfirebugと、CSSでbackground-color#000とか使って背景を塗りつぶすことで確認しながらチマチマとやってみた。
これが正解なのかはわからないがとりあえずカタチにはなった。

ページ全体の中央寄せ

#content {
width: 750px;
margin: 0 auto;
}

日付と記事を合わせたとこ。
幅750pxに対して日付100px+記事450px+左右マージン各100px。

#wrapper{
width: 550px;
margin: 0 100px 0 100px;
}

記事部分の調整。下にマージン50px。

#main {
width: 450px;
padding: 0;
margin: 0 0 50px; 0;
}

サイドバーのfloat解除

#box2 {
float: none;
width: 750px;
margin: 0 auto;
}

サイドバーにあるモジュールを全部左にfloatさせて横並びに。
幅とか微調整。
ちなみに上から、モジュール全体、モジュールの名前、プロフィール、フォローボタン、検索、最近のエントリー、リンク、アーカイブ。

.hatena-module-body{
font-size: 0.8em;
}
.hatena-module-title{
text-align: center;
}
.hatena-module-profile {
float: left;
width: 120px;
text-align: center;
margin-right: 10px;
}
.hatena-follow-button {
width: 95px;
margin: 0 auto;
}
.hatena-module-search-box {
float: left;
width: 200px;
}
.hatena-module-recent-entries {
float: left;
width: 120px;
text-align: center;
margin-right: 10px;
}
.hatena-module-links {
float: left;
width: 120px;
text-align: center;
margin-right: 10px;
}
.hatena-module-archive {
float: left;
width: 120px;
text-align: center;
margin-right: 10px;
}

あと、本当はプロフィールの下に検索を持っていきたいのだが上手くいかない。