display:table

この日記で、サイドバーを右の固定サイズ、左はウィンドウの幅によって変わるように
尚且つ、狭くなってもサイドバーがウィンドウ内に収まるようにするのに悪戦苦闘した。

<div class=hatena-body>
    <div class=main>
        <div class=body></div>
    </div>
    <div class=sidebar></div>
</div>

↑大雑把に書いたbody部分

↓大雑把に書いたスタイルシート部分

.hatena-body {
    width: 100%;
    height: 100%;
}
.main {
    float: left;
    width: auto;
    height: 100%;
    margin-right: 225px;
}
.sidebar {
    float: right;
    clear: right;
    width: 210px;
    height: 100%;
    margin-left: -210px;
}
.body {
    width: 100%;
    height: 100%;
}

IE6以外だとborderの幅なども考慮しないといけないみたいだが
大雑把に書くとこんな感じで、mainの幅を指定せず（一応autoにしてみた）
main内の要素のH3なりbodyなりの幅を100%にすればIEではうまく表示できたが
IE以外だとmain内のテーブルを指定しないと幅が安定しなかった。

だからダミーのテーブルをmainタグの下に作ってその幅を100%にしていたのだが
main内のbodyに

.body {
    width: 100%;
    height: 100%;
    display: table;
}

display:tableを加えたら、ダミーのテーブルを削除してもIE以外でも幅が安定した感じだ。(多分）
display:tableはテーブルに変えるってことか？

まぁ、字を見てすぐに気付くべきだったが･･････。

修正

.bodyではだめだった。テキストエリアなどがあった場合幅が安定しない。
仕方がないのでmainタグの下にテーブルではなく、divを作成して
それをdisplay:table、width:100%にした。

<div class=hatena-body>
    <div class=main>
        <div class=msg></div>
        <div class=body></div>
    </div>
    <div class=sidebar></div>
</div>
-----------------------------------
.msg {
    display: table;
    width: 100%;
}

こんな具合にしたらとりあえず直った。
divの場合は何か文字を入れないと広がらないので、何も文字を入れない場合は
素直にtableを作成した方がいいみたい。