- ベストアンサー
ウインドウ幅を狭めるとボックスが下に飛んでいきます
cssを使ってdivでテーブルのようなレイアウトにしています。 サイト全体の設定は、左から「メニュー」「メイン」「右サイドバー」といった感じで、メインの部分にdivでボックスを作ってます。 メニューは固定でメインとサイドバーは可変にしているのですが、ブラウザのウインドウ幅を左右に狭めると、floatで左右にくっつけたボックスがバラバラになったり、下へ飛んでいったりしてしまいます。 テキストの場合は可変してもいいのですが、ボックスやテーブルは動いてほしくありません。 常に前面に固定されて表示されるような方法はあるのでしょうか？
- HTML
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No.2の方の出されたURLと被るのですが 【ＣＳＳ】 /* センタリング */ .cent { text-align: center; } .cont { margin-left: auto; margin-right: auto; width: 700px; } /* メニューサイド */ #mnu { float: left; text-align: left; width: 300px } /* メインコンテンツ */ #main { float: right; text-align: left; width: 400px } 【HTML】 <html> <head> ＝＝中略＝＝ </head> <body> <!-- センタリング --> <div class="cent"> <div class="cont"> <!-- メニュー --> <div id="menu"> ＝＝中略＝＝ </div> <!-- メインコンテンツ --> <div id="main"> ＝＝中略＝＝ </div> </div></div> </body> </html> この場合は２つに割ることを想定していますが、このような感じとなります。 最初の２つで部分でセンタリング（２つとも必須で、順番は守ってください）をしているのですが、センタリングが必要なければ「.cont { width: 700px; }」だけでいいです。 イメージとしては外枠を括って内部を割る、というイメージです。ちなみに、場合によってはボックスが下に飛んでしまうことがあるので、各ボックスの和（この場合はmenu+main）が外枠（cont）の値よりも若干少なくするようにすると良いかもしれません。 今回はpxで幅を固定するやり方でしたが、画面幅にそろえる形であればwidthを%にすれば良いかと思います。この場合、センタリングは必要ないので外枠のみを設定してください。
その他の回答 (3)
- tyouei
- ベストアンサー率32% (17/53)
No.3です。 No.3は即席で打ち込んだので大分省略しています。DOCTYPE宣言などは必要に応じて入れてください。
http://desperadoes.biz/style/dan/index.php このサイトには、お世話になりました。 多分、ヒントが得られると思います。
お礼
すごく分り易いサイトでした。 質問以外のことも沢山勉強できました。どうもありがとうございます。
- Evreux
- ベストアンサー率29% (225/774)
nobr ってHTMLタグを使ってもだめですかね？
お礼
ボックスをnobrで囲んでみたところ、ボックス内のテキストが改行されずにはみ出しました。 ウインドウ可変は相変わらずされてしまうようです。
お礼
遅くなってすみません。教えてもらったやり方で、何とか期待するものに近いデザインを作れました。 ご丁寧にありがとうございました。