皆様今晩は、本日綺麗な女性に囲まれて質問攻めにあう。と、いう羨ましい体験をした川端でございます。
先に謝っておきますが、中途半端な回答で胸のすくよう答えを求めて読むと腹が立つと思いますのでご注意下さい。
結局高さの問題を解決出来ませんでした。
お題編はコチラ
誰かこれのブラッシュアップ版が思いついたら是非教えて下さい。
でわ答え↓
(1)左に横幅50%のdiv、右に同じく横幅50%のdivを配置。
(2)左のボックスにさらにボックスを二つ入れる。右側のボックスは400px固定。左側は可変。
(3)右のボックスも同様。左に400ox固定、右側に可変のボックスを配置。
(4)中央に固定800px分できるdivは空にする。
(5)ポジションで中央に800pxのボックスを配置。
(6)万歳。
てな感じです。いわゆるネガティブマージンを利用したリキッドレイアウトを複数使用してなんとかしちゃったという状態。
やっぱjavascriptを使わないと無理なのかな〜。
今日出来て嬉しかったので書く。
みんな知ってるだけなのかもしれないけれど、ググってもあまり情報は出てこなかったのでお題にします。
ウェブでコーディングに携わっている人は是非考えてみてください。
回答を出した先着1名の方には川端から素敵じゃないかもしれないプレゼントをこれから考えます。
ここで、左、中央、右、すべてのカラムをパーセント指定すればいいじゃん！！って考えた人。そりゃそうだ。でもそれじゃぁお題にならない。
左、右のカラムは固定長で中央カラムのみ可変にする。これもググれば情報は出てくるので簡単そう。
それでは今回のお題です。
必須の条件として下記。
(1)中央カラムは中央寄せ、固定長800px。
(2)左右のカラムは可変。ブラウザの横幅が長ければ広がるし短ければ消えてしまう。つまりブラウザの横幅が800pxを切ると中央のカラムのみ表示。左右のボックスは非表示となる。ブラウザの横幅が短くなるとボックスが落ちるのはもってのほか！！！！
(3)とりあえず高さは無視(高さを揃えるとか考えるとややこしいので)
(4)対象ブラウザはとりあえずFireFox2以降(IEとかややこしいので)
例えば、中央カラムを挟んで左右の背景繰り返しパターンが変わる。などのデザインには使えそうですね。
川端はまだIEでの検証は出来ていませんが、FireFoxで確認できました。
明日からコーディングに入って(僕じゃないけど)使える確証が出来次第また回答編をアップしますので楽しみに待っていてください。使えなかったらどうなるんだっ。てな話はおいといて。
でわ、明朝4:30から始まるバレーボールの日本-イタリア戦の再放送を見なければならないので(いい加減にしろフジテレビ739)寝ます。皆さんおやすみなさい。
