CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい

No.2です。No.1様のご回答と一部被りますが、ご容赦下さい。 とりあえず、IE6を含め主要モダン・ブラウザが標準準拠モードになる”HTML4.01 Strict／システム識別子有り”【A】とIE6が後方互換モードになる”XHTML 1.1／XML宣言有り”【B】とで実際に検証してみました。 今のままでは【A】【B】どちらであってもIE6を含む主要モダン・ブラウザのいずれにおいても、右のカラム落ちが発生します。 【A】の場合、各ブラウザでのボックスモデルの計算方法は： #containerがwidth: 780px＋border-width: 1pxなので782pxとなりますので、#container内で左右カラムとして並ぶには子要素の幅の合計は780px以下でなければなりません。 ですが、#contentがwidth: 540px＋padding-left: 20pxで560px、#menuがwidth: 240px＋padding-left: 10pxで250pxですから、560px＋250px＝810pxとなり、親要素の#containerの描画領域を30pxも超えてしまいますので、結果として後から描画される#menuの方が幅に収まりきれず#contentの描画が終わった次の位置から描画される事になり、カラム落ちが発生します。 一方【B】の場合は、IE6以外のブラウザの挙動は【A】と同じですが、IE6のでのボックスモデルの計算方法は： #containerがwidth: 780pxに対し、その内部でborder-width: 1pxなので左右2px分をボーダーの描画領域として差し引く為、#container内で左右カラムとして並ぶには子要素の幅の合計は778px以下でなければなりません。 ですが、#contentがwidth: 540px（padding-left: 20pxの値を含む）＋#menuがwidth: 240px（padding-left: 10pxの値を含む）＝780pxとなり、こちらの場合でも親要素の#containerの描画領域を2px超えてしまいますので、やはりカラム落ちが発生します。 No.2でアドバイスさせて頂いた通り、もし質問者様のHTML文書が【A】の様に各ブラウザを問わず標準準拠モードになる書式なのであれば、単純です。 (1)親要素の#containerの実際の内容の描画領域を780px（ボーダーの太さを足して782pxに）にするのか、778px（ボーダーの太さを足して780pxに）にするのかを決める。 (2a)前者なら、#containerの指定は現在のまま。 (2b)後者なら、#containerの指定はwidth: 778pxに、同じ理屈で#bannerの指定もwidth: 778pxに変更する。 (3a)(2a)なら、#contentの指定はwidth: 520px;に、#menuの指定はwidth: 230px変更する。 (3b)(2b)なら、#contentの指定はwidth: 519px;に、#menuの指定はwidth: 229px変更する。 ですが、【B】の様にIE6のみが後方互換モードになる書式だとCSSハック等による振り分けをするか、あるいは文書構造自体を変えるなどの対応が必要になります。 【B1】HTML側の文書構造を変えず、CSSハックによってIE6の解釈を振り分ける場合 (1)上記と同様。以後の考え方は同じなので、ここでは仮に前者（ボーダーの太さを足して782px）の場合とする。 (2)#containerの指定は現在のまま。 (3)widthと左右paddingの値が同時に指定されている#contentと#menuの指定に、IE6のみ有効なアンダースコア・ハックを使用して適用される数値を振り分ける。 #content{ width: 520px; _width: 540px; padding-left: 20px; （他のプロパティは省略） } #menu{ width: 230px; _width: 240px; padding-left: 10px; （他のプロパティは省略） } ※アンダースコア"_"を先頭に付けたプロパティはIE6のみバグにより有効と解釈される為こちらの値で上書きされるが、IE6以外は記述が不正の為無視される。 【B2】CSSハックを使用せず、HTML側の文書構造を変えて対応する場合 ※構造については一例です。 ＜HTML＞ （省略） <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <div id="inner_content"> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="menu"> <dl> <dt>メニュー</dt> <dd>カテゴリ１</dd> <dd>カテゴリ２</dd> <dd>カテゴリ３</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> （省略） ＜CSS＞ ※変更したセレクタのみ。他は同じ。 #centermain{ width: 782px; text-align: center; } #container{ margin: 0 auto; border: 1px solid #ccc; text-align: justify; } #content{ float: left; width: 540px; height: 100px; padding-top: 1em; background-color: #ccc; } #inner_content{ margin-left: 20px; } #menu{ float: right; width: 240px; height: 100px; padding-top: 1em; background-color: #999; } #menu dl{ margin-left: 10px; } ※ちなみに余白を作りたい為だけに<br>（強制改行）を使っているならそれは推奨されないので、適切な要素に上下マージンやパディングを設けてスタイルを調整するべきです（#footで既にやっておられる様に）。本件であれば、#contentと#menuにpadding-topで1emなどの値を設定すれば一行空きぐらいの余白が設けられますので、上記サンプルCSSにはその点も盛り込んであります。

補足的な事ですが… 以前から同様の質疑のやりとりを見ていてちょっと気になっていたのですが、この現象は正確には「IE6だから」無条件で起こるわけではないんですよね。後方互換モードでボックスモデルの計算方法の解釈が違ってしまう場合に起こります。 以下のサイトには非常にわかりやすい比較検証の一覧があります。 http://2xup.org/log/2007/07/27-2111 上記からそのまま関連する説明を以下に抜粋しておきます。 （抜粋ここから） 指定した幅 (width) と高さ (height) の外側に border と padding が足される content-box (正しい解釈) と、指定した幅と高さが border と含めてしまう border-box があります。Internet Explorer では後方 (過去) 互換モードで border-box で解釈するので、Windows IE 6 では注意が必要です。 （抜粋ここまで） つまり、IE6であっても、標準準拠モードとなる書式（HTML 4.01 Strict、XML宣言無しのXHTML等）を選択していれば、この解釈違いは起こりません。 ＃IE6の場合に突出して後方互換モードになる条件が揃いやすいというのは事実ですし、XHTMLの場合はXML宣言をする事が強く求められているのですから、IE6が「困った存在」である事には疑いようもないところです。 なので、先ずは、質問者様が現在トラブルを抱えてらっしゃるHTML文書が標準準拠モードになっているのか後方互換モードになっているのかを、上記一覧などと照らし合わせて確認する事です（それによって場合によっては今後の対応が違ってきますので）。 ＃floatしたコンテナのカラム落ちが起きているところを見ると、No.1様ご指摘の通り十中八九IE6で後方互換モードになるDOCTYPEスイッチに切り替わっているとは思いますが…