cssでの幅の分割（固定・可変混合）がうまくできません

質問

画面左をコンテンツ（幅は可変）・右をメニュー領域（幅は固定）とするために２分割し，さらにコンテンツを２段に分けようとして，次のような構成にしてみたのですが思い通りになりませんでした．

<div style="width:200px; height:600px; background-color:#ccf; float:right">
メニュー
</div>
<div style="width:auto; height:600px; background-color:#fcc;">
<div style="width:50%; height:550px; background-color:#6f6; float:right">コンテンツB</div>
<div style="width:auto; height:550px; background-color:#ff6;">コンテンツA</div>
</div>

２段組は丁度半分ずつにしたかったので，右（コンテンツBの部分）のwidthを50%，左（コンテンツAの部分）はautoにしました．ＩＥ６では希望通りコンテンツ領域の幅の50%で表示されているようですが，firefoxではメニュー領域も含めたウインドウ全体の50%と解釈されているようで，ＩＥとは表示が異なり困っています．どちらのブラウザでもコンテンツ領域をちょうど半分ずつにするにはどうすればいいでしょうか？

ちなみに，コンテンツ内の左右を共に50%とすると，どちらのブラウザでもレイアウトが崩れてしまいます．firefoxならそうなっても仕方ないと思いますが，ＩＥでも崩れてしまうのは疑問です．できればこの点にも配慮して両方とも幅を50%と指定しても崩れない方法をお教えください．

回答No.1

Questa · ベストアンサー

STYLE属性では読みづらいので、CLASS属性で書いてみました。

(HTML)

<div class="all-wrapper">
<div class="content-1">
<div class="content-2">
<div class="content-a">コンテンツA</div>
<div class="content-b">コンテンツB</div>
</div>
</div>
<div class="menu">メニュー</div>
</div>

(CSS)

.all-wrapper { /* clearfix */
overflow: hidden;
}
.all-wrapper:after { /* clearfix */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.content-1 {
float: left;
width: 100%;
height: 600px;
margin-right: -200px;
background-color:#fcc;
}
.content-2 {
margin-right: 200px;
zoom: 100%: /* for IE互換 */
}
.content-a {
float: left;
width: 50%;
height: 550px;
margin-right: -1px;
background-color:#ff6;
}
.content-b {
float: right;
width: 50%;
height: 550px;
background-color:#6f6;
}
.menu {
float: right;
width: 200px;
height: 600px;
background-color:#ccf;
}

content-1 はコンテンツＡ、コンテンツＢを含む領域で、ウインドウ幅全部を占有しています。
このままではメニュー領域が表示できませんから、200px の負マージンを設け、
メニュー領域をコンテンツ領域に重ねています。

content-2はcontent-1からメニュー領域を除いたボックスです。
このボックスを2分割するわけですが、IEでのレイアウト崩れを防止するために、
1px の負マージンを設けています。

　　content-2の幅が401pxのとき左右のボックスの幅は
　　　401px / 2 → 200.5px → 切上 → 201px → 合計402pxで1pxの超過 →
　　　右ボックスが下に落ちるはずだが →
　　　1pxの負マージンで重なることを許しているから問題なし。
　　　ただし左右のボックス幅は1pxだけ異なる。

※ WIN IE5 では正常に表示されません。MAC の表示は未確認です。

ボックスの多重度が高いので、思わぬ弊害が出るかもしれません。ご参考までに。

お礼

ご回答ありがとうございます．IEでもFireFoxでもバッチリ希望通りの表示になりました！
marginでマイナス指定できるとは知らず，目からウロコでした．
２段組部分の細かい配慮も詳しい解説付きでとても参考になりました．
まだすべては理解できておりませんがこれから少しずつ確認してまいります．本当にありがとうございました．