スタイルシートで三段組を作りたいのですが

質問

私はテキスト主体のサイトを持っているのですが、今まではテーブルを使ってレイアウトを構成してきました。
上下左右のマージンをパーセントやピクセルで指定してメインであるテキストがあるテーブルは可変というスタイルです。

数年前まではディスプレイの解像度がそれほど多様ではなかったので、これでも大丈夫だったのですが、最近の横長ディスプレイの普及のため、この方法では環境によっては横に長く表示されてしまうため、divタグを使っての段組に変えて行こうと思いました。

そこで段組のスタイルシートについて説明しているサイトなどを見てみたのですが、私がやりたいと思っているレイアウトが見つからなくて困っています。

ようは三段の段組を作りたいのですが、ボーダー壁紙を使うことが多いので左部分を空けたいのです。
A、B、Cの三段組で右に寄っているレイアウト、つまりBに720ピクセル、Cに80ピクセルの幅を持たせ、一番左のAの部分を可変にしたいのですが、これは可能ですか？

私の調べたところ、AとBを指定してCを可変にするレイアウトはあったのですが、上記のようなものは見当たりませんでした。

それともう一つ、Bの720ピクセルのボックスをページの中央にレイアウトする場合は、左右のボックスはどういう指定をすればいいのでしょうか？

上記のような段組の作り方、あるいは説明しているサイト等ありましたら、教えて下さい。
よろしくお願いします。

回答No.1

koke29 · ベストアンサー

こんにちはー やり方考えてみました（コードは書かないでおきます）

1.float:right; width:800px; のdivを用意
2.Bのdivは float:left; width:720px;
3.Cのdivは float:left; width:80px;
4.clearを入れて、divを閉じる
5.Aのdivはfloat:right;
6.clearを入れる

こんな感じにするとA可変の段組になります

ところで
Aは背景のみならbodyに背景指定でB・Cの2カラムじゃダメなんですかね？

もう一つのBを中央にっていうのは、別のパターンなんですよね？
1.width指定のdivにmargin-left:auto; margin-right:auto;
2.A、B、Cをこの中に入れる（float:left; widthは入れたいやつに入れる）

これで中央に配置されます
希望通りの段組になるのかちょっとわからないですが参考になれば…

お礼

回答ありがとうございます。
教えてくださったやり方を参考に作ってみます。

>Aは背景のみならbodyに背景指定でB・Cの2カラムじゃダメなんですかね？

はい、おっしゃるように背景はbodyに背景指定にしてるんですが。
ただ、壁紙が右固定の場合もあるもので、３段組のスタイルシートを作っておけば、それで応用できるかな～と思いまして。

Bを中央にというのは、敷き詰め型の壁紙を使っている場合です。
今までは、テーブル部分にフィルターをかけてテキストが入るテーブル部分の壁紙をぼかして使っていました。

こちらも教えてくださったやり方を参考にして挑戦してみます。
ありがとうございました。