相対だけど固定にしたい・・・お助けを～

質問

宜しくお願いします。

現在ページを％指定で作っているのですが、思うように表示が出来ません。
ちなみにページ構成は２カラムで、ボックス部分は全て％で指定しています。
また、それらを全てCSSで定義しているのと、xhtmlのストリクトで定義しています。

問題部分は、ブラウザを最大化して閲覧すると問題なく表示されるのですが最小化？というか、小さくしてブラウザの端っこを持って左右に伸ばしたり縮めたりすると、ページの中に表示されているボックス部分が下に回り込んだりして崩れてしまいます。

意味が伝わりますでしょうか？なんとも表現が難しいのですが・・・。

普通、画面を小さくしても中のページコンテンツはそのままで、表示自体は崩れないと思うのですが、例えば、http://www.w3.org/

相対指定なので、それぞれの３カラムの幅は比例して収縮されますが、
その、並びなんかはそのままですよね？

私の場合、画面を縮めるとboxごと下に回り込んで、根本的なレイアウトが変わってしまうのです・・・。

変な質問ですみません、伝わらなかったら補足します・・・。

どなたかアドバイスを宜しくお願いいたします。

回答No.2

ICHI-yan · ベストアンサー

ご要望のようなデザインを、「リキッドデザイン」といいます。
それで、検索すれば解決の可能性高いです。

ソースがないので、憶測ですが、ボックスの取り方にpaddingやmarginやborderを使われると思うのですが、その解釈により、画面いっぱい100%の筈が、100%を超え、はみ出した部分が下に回り込むのだと思います。

回答No.5

noname#23734

>画面を縮めるとboxごと下に回り込んで、根本的なレイアウトが変わってしまうのです
floatはそういうものです。
”floatする要素は親要素が作るボックス左辺より左にはいけない”
”あるボックスがfloatで、それ以前に出現する要素が同方向のfloatの時、後に出現するボックスの外左辺が、前のボックスの外右辺より右でなければならない。そうでなければ、後に出現するボックスの外上辺が、前に出現するボックスの外下辺より下でなければならない。”

ブラウザはこの規則を守っているのではないでしょうか。

現実的では有りませんが、レイアウトしている要素をoverflow:hidden又はoverflow:scrollにするとレイアウトが崩れないと思われます。
（試したことはありません）
何故かというとたぶんレイアウトしている要素からはみ出した内容を表示しなかったり、スクロールして見れるようにするため次の要素が回り込むスペースを確保できるのだと思います。

お礼

皆さん有難う御座いました。
今回の件で色々と勉強になりました。

また色々なアドバイス本当に感謝いたします。！

回答No.4

MAN_MA_RUI

apple_mangoさん、こんにちは。MAN_MA_RUIと申します^^

> 問題部分は、ブラウザを最大化して閲覧すると問題なく表示されるのですが最小化？というか、小さくしてブラウザの端っこを持って左右に伸ばしたり縮めたりすると、ページの中に表示されているボックス部分が下に回り込んだりして崩れてしまいます。
うーん、ボックス幅の合計が90%とか80%くらいならばある程度大丈夫かもしれません…^^;
100%とか、99%とかぎりぎりの数値だとウインドウ幅でずれることもありますが、ある程度余裕があれば多分大丈夫です。

まぁそれでもウインドウを縮めてマルチカラムレイアウトが崩れるのは想定内の動作だとお考えください。
というかある程度狭くなったときは動いたほうがいい場合もあると思います。文字の折り返し頻度が高くなるとものすごく見づらいです…^^;

それに普通の人ならば見やすいウインドウサイズ、見やすい表示幅、見やすいフォントサイズで見ると思いますがら、
極端に狭くしたときマルチカラムレイアウトが崩れるのは無視していいと思います。
IEのウインドウ幅を800x600程度にして、横にお気に入りを表示したくらいの大きさをひとつの基準に考えると良いんじゃないかなー？
あまり当てになりませんが…。

回答No.3

123isao

％指定で作る以上そうなります。
http://www.w3.org/ のページでも横幅を短くすると
一番右の列が下に移動してしまいます。
移動するタイミングは横幅固定のパーツ部分(画像など)が％指定より長くなってしまう場合です。

回答No.1

Rusica

どんなHTMLとCSSを書いているのか分からないので何とも言えませんが、
とりあえず下記URLのサイトで段組レイアウトに基本を学んでみてはいかがでしょうか？

参考URL：

http://www.geocities.jp/multi_column/