【CSS】横３カラム：左右は固定pxで中央カラムはが残り幅となるにはどうすれば？

質問

http://www.amazon.co.jp/

のように、

横３カラムで、全体は１００％、一番左カラムと一番右カラムは固定px、真ん中のカラムは100%-左カラム固定pxー右カラム固定pxで、
ウィンドウをリサイズしても、この状況が変わらない・・・

というようなCSS（JSもからむのでしょうか？）は、どのようにすればつくれるのでしょうか？

<div style="float:left;">
左カラム
</div>
<div style="float:right;">
右カラム
</div>
<div>
中央カラム
</div>

。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。

どうぞよろしくお願いいたします。

回答No.1

abril · ベストアンサー

方法は色々考えられますが、手っ取り早くなら、CSS HappyLifeさんの提供されている「3カラムサンプル18種」というテンプレート集があります。

http://css-happylife.com/log/css-template/000168.shtml

ここのSample 08、09あたりのテンプレートが質問者様のご希望のレイアウトになるかと思いますが。

お礼

ご回答ありがとうございます。

なるほど、marginにマイナスをあたえるのですね。。。

知らなかったです。

あと、やや違うケースですが
３カラムで。
左右のカラムは、widthを固定ピクセルにせずコンテンツがそのまま表示されたときのwidthが（リサイズしても）たもたれる。

で、中央のカラムは、100%から左右のカラム幅をひいた幅となる。
（さらに、中央カラムでは、min-width:300px;を設定する）

ということって実現可能でしょうか？

だとすればどのようにできるでしょうか？

よろしくお願いいたします。

回答No.3

abril

> 「エラスティック・レイアウト」とはなんでしょうか？

ANo.1で挙げた参考サイトのテンプレートでいうSample 16-18がそうです。
リキッド・レイアウトはその名の通りウィンドウのリサイズに併せて幅が流動的になりますが、エラスティックでは一見、pxで指定したかの様に固定されています。ただし、px指定との場合の違いは、ブラウザの文字サイズを拡大・縮小して見るとすぐわかりますが、文字サイズの変更に併せて”各コラムの幅が一定の比率を保ったまま”リサイズされます。Opera、IE7、Firefox3、などに備えられている「ズーム」という機能を使用した時の状態に近いですね。
これは、コンテンツの幅を指定する際に、emという単位を使用している為です。emとpxの違いについては説明を省略させて頂きますのでググるなどして調べてみて下さい。とりあえずこの場では、大雑把な説明ですが、1em＝1文字分、という様な考え方だと思っておいて下さい。つまり、例えば20emと指定されたコンテンツ幅は、ブラウザ側の文字サイズの拡大縮小の際にも常に大体一行20文字分ぐらいの幅が保たれる、という状態になるという事です。ただし、文字列の内容やブラウザの解釈などにより、きっちり20文字にはならず若干の誤差が生じます。あくまで、おおよそ…と考えて下さい。
（確か、現在のYahoo!のトップなんかがエラスティックだったと思います）

> width:autoってwidthを指定しない場合と同じことでしょうか？

初期値がautoですので、そうなります。また、子要素でwidthを指定しなければ、親要素の値を継承します。例えば、
<div id="hoge">
<p>ほげ…</p>
</div>
という構造で、<div id="hoge">に対してのみ"width: 200px;"と指定していれば、その子要素の<p>も自動的に幅200pxとなります。

> 左⇒width:auto; または　指定しない
> 右⇒width:auto; または　指定しない
> 真ん中⇒100%-左カラムのwidth-右カラムのwidth
> を実現させつつ、

左コラムと右コラムの幅が何らかの値（px、em、%…）で指定されていないと、中央コラムに対して「100%-左カラムのwidth-右カラムのwidth」という状態は成り得ないでしょう。”引くべき（中央コラムのレンダリング領域から除く）値”が定められていなかったら、計算はできないですよね？
コンテンツ全体の幅がウィンドウのリサイズに併せて変動するリキッド・レイアウトで、且つ、左・右コラムのwidthを指定しなければ、必然的に残りの中央コラムにも幅の指定はできなくなります（したとしても、中央コラム用に残された領域全てを常にリキッドで確保する状態にはならない）。つまり、3コラム全てが内容とリサイズに依存して全くの成り行き任せとなります。それだと内容によってはあるコラムだけが極端に狭くなったり広くなったりしてしまう場合もあります。

> 横３カラムを実現させようとしても、文章量や、ウィンドウのリサイズなどによって、横３カラムが崩れる、つまり、あるカラムの内容が別のカラムの下にまわりこんでしまう、とう現象が起きてしまうもので・・・。

最終的な目標がただ単にこれ、でありリキッド・レイアウトのいずれかのパターンで良いならば、上記の様なトラブルが起きる（コラム落ちの原因）のは、やはり残念ながら質問者様も思っておられる通り現在の「書き方が悪い」のでしょう。おそらくfloatのクリアと各レンダリング領域の確保が適切にできていない為だけだと思います。
とりあえず、今作成中のものは一度リセットして、既出のサンプルのテンプレートから起こし直してみては？また、3コラムレイアウトについてはもう1つ、非常に参考になるサイトがありますので、そちらをお手本にされるのも良いかも。
【参考】http://www.geocities.jp/multi_column/

回答No.2

abril

ANo.1です。

> 中央カラムでは、min-width:300px;を設定する

これはそのまま、CSSに設定を追加してやればいいだけの話ですが。

> 左右のカラムは、widthを固定ピクセルにせずコンテンツがそのまま表示されたときのwidthが（リサイズしても）たもたれる。

申し訳ないのですが、上記で仰っている意味がよくわかりません。「コンテンツがそのまま表示されたときのwidth」とはどういう事でしょうか？
「widthを固定ピクセルにせず」だと、%やemでの指定になりますが、前者だとウィンドウのリサイズによって実際のレンダリング領域は可変となりますし、後者だと所謂エラスティック・レイアウトになると思いますが。もし何もwidthを指定しなければ、各コラムのレンダリング領域はそれぞれが内包する要素とウィンドウのリサイズに依存してしまいますので「たもたれる」という状態はなくなりますし。

お礼

恐縮です。たしかに意味不明でしたね。。。すみません。

ところで、「エラスティック・レイアウト」とはなんでしょうか？

意図としては、
左⇒width:auto; または　指定しない
（実はwidth:auto;って昨日しったばかりなのですが、width:autoってwidthを指定しない場合と同じことでしょうか？）
右⇒width:auto; または　指定しない
真ん中⇒100%-左カラムのwidth-右カラムのwidth
を実現させつつ、

レイアウトが、横３カラムのまま崩れない（最終的な目標はこれ）、ことを目指しています。

どうも、横３カラムを実現させようとしても、
文章量や、ウィンドウのリサイズなどによって、
横３カラムが崩れる、つまり、あるカラムの内容が別のカラムの下にまわりこんでしまう、とう現象が起きてしまうもので・・・。

書き方が悪いのでしょうか？

初歩的な質問かもしれませんが、よろしくお願いいたします。