DIVブロックを画面をはみ出して配置するには

質問

┌───┐
│Ａ　　│
├─┬─┤
│Ｂ│Ｃ│
└─┴─┘

上のようなレイアウトです。
Ａ、Ｂ、Ｃとも<DIV>です。
Ｂ、Ｃ を float=left にしているのですが、
Ｃの中身が大きくなるとＣがＢの下に来てしまいます。
ひとまず、table で横並べにしているのですが、
div と css で、Ｃが下に行かないようにする方法はありますでしょうか。

回答No.3

noname#56882 · ベストアンサー

#1です。
> Ｃを固定にしたくない状態です。
ということでしたら、おそらく崩れてしまうのは仕方がないと思います。
IEではぎりぎり表示されたとしても、他ブラウザでは完璧にレイアウトは崩れてしまいます。
［スタイルシートによる崩れない　2カラム　3カラム・レイアウト］
http://desperadoes.biz/style/dan/
の「TYPE C-2 左ボックスのみ幅固定」が一例になると思います。

お礼

非常に分かりやすいサンプルありがとうございます。
参考にいろいろとやってみたいと思います。

回答No.4

goldfox

AとCの長さが同じでなくてもいいなら、

要はBとCが重なっていればいい訳だから
.boxbc{position:relative; border:1px solid #0000ff; }
.aa{border:1px solid #ff0000;}
.bb{width:200px; position:absolute; top:0px; left:0px; border:1px solid #fff222; }
.cc{margin-left:200px; border:1px solid #ffaaff; white-space: nowrap;}
<div class="aa">Aです。Aです。</div>
<div class="boxbc">
<div class="bb">Bのメニューです。<br>横幅200px。absoluteでboxbcの左上起点でccのboxと重ねています。</div>
<div class="cc">ここはCです。<br>ここはCです。<br>ここはCです。<br>左余白200pxを指定してメニュー（bb）と内容が被さらないようにしています。nowrapで右端で折り返さない指定です。IE6で確認していますが、他のブラウザではどうでしょう？。ここはCです。ここはCです。ここはCです。ここはCです。ここはCです。ここはCです。ここはCです。<br>ここはCです。</div>
</div>
floatを使う場合は横幅を指定しないといけなかったと思います。
横幅可変のboxには向かないんじゃないでしょうか。
よく分かってないですが。

お礼

重ねるという手段があったのですね。
Firefoxでは大丈夫でした。
この方法、よさそうです。
ありがとうございました。

回答No.2

goldfox

Bの幅は固定ですか？
AはCに合わせて横幅が増えるのですか？

補足

Bは固定です。
AはCに合わせて横幅が増えると尚良いのですが、
BとCが並びさえすればよいです。

回答No.1

noname#56882

ひとつの大きな箱（下の例ですと.wrapper）で全ての<div>を囲ってしまうといいと思います。

CSS記述例
.wrapper{
width:700px;/* Aの横幅、B+Cの横幅と同じになるように */
}
.A{
width:100%;/* wrapperで指定しているのでここでは100%で */
height:100px;/* 高さは任意 */
}
.B{
float:left;
width:200px;/* 横幅は任意 */
}
.C{
float:left;
width:500px;/* 横幅は任意 */

HTML記述例
<div class="wrapper">
<div class="A">テキストテキスト</div>
<div class="B">テキストテキスト</div>
<div class="C">テキストテキスト</div>
</div>

お礼

ありがとうございます。

説明が足りなかったですね。
ＡがヘッダでＢがメニュー、
Ｃが可変する内容なのですが、
Ｃを固定にしたくない状態です。
（帳票的な内容なので、横スクロールで２～３画面分になることも）
テーブルだと、固定にしても、はみ出した分が勝手に広がりますが、
そのような形をdivで行いたいと考えています。
可能でしょうか？そもそも不可能でしょうか？