- ベストアンサー
ウインドウ幅を狭めるとボックスが下に飛んでいきます
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で囲んでみたところ、ボックス内のテキストが改行されずにはみ出しました。 ウインドウ可変は相変わらずされてしまうようです。
関連するQ&A
- 可変幅でブラウザ縮小表示によるカラム落ちを防ぐ方法
お世話になります 以下のように可変幅のdiv要素にボックスA,B,Cをfloat:left、Dをfloat:rightしたナビゲーションがあるのですが、可変幅でブラウザ縮小表示によるカラム落ちを防ぐにはどのようにすればよいのでしょうか？固定幅であればボックスを内包する親要素に固定幅を設定すれば済む話だと思いますが。よろしくお願いします。 +--------------------+ [A][B][C]----------[D] +--------------------+
- ベストアンサー
- HTML
- <div>タグでサイドバーを作るときの幅の指定方法
全体を囲むdivの中にサイドバーとメインコンテンツ用のdivを入れたいと思っています。 <div id="allContents" style="width:100%;"> <div id="sideBar" style="float:left; width:200px;"></div> <div id="main" style="float:right;"></div> </div> で、このときに、右側に表示される#main部分の幅を「残り全部」にしたいのですが、 widthに何を指定したら良いのでしょうか？ サイドバー部分が200px固定で、残りのメイン部分の幅はブラウザの右端までにしたいのです・・。 （Javascriptで#main部分の長さを取ろうと思っているので、中に何も入っていなくても divの大きさが一杯までなるようにしたいのです・・） ご教授よろしくお願いします。
- ベストアンサー
- HTML
- 入れ子にしたfloatのclear
初めてこちらを利用させていただきます。 CSSで縦3段、例えば上から『HEADER』、『MAIN』、『FOOTER』などとの段組を作成し、中央の『MAIN』内に『MENU』と『CONTENTS』の左右2段の段組をfloat:leftを利用して作成し、テンプレートとして利用しようとしています。 このテンプレート部分は、『MENU』の幅のみ固定で、『CONTENTS』は可変幅のレイアウトとしております。ここまでは順調に作成できたのですが、肝心のコンテンツの作成でつまづきました。 『CONTENTS』内に、更にfloat:leftで左右にDIVを配置したブロックを複数作ろうとした場合、2つ目のブロックを配置した時、1つ目の右側DIVの高さが1つ目左側DIVよりも高さが低い場合、2つ目以降のブロックが1つ目左側のDIV右に回りこんで表示されてしまいます。これは1つ目のブロックを配置した後、float:leftをclearしていないから当然だと思います。 そこで、1つ目のブロックの後にclearを摘要（<br />などに）させると、テンプレートの、『FOOTER』直上に2つ目のブロックが配置されてしまいます。1つのclearで入れ子になったfloat:leftが全てclearされてしまう様です。 これが『仕様』と言われればそれまでですが、TABLEや、固定幅のfloat：right等を使用すれば回避できそうですが、TABLE脱却・リキッドレイアウトをここまで実現できたのに、肝心のところで妥協するのも悔しい気がします。 まさか、こんな単純な事で丸一日悩むとは思いませんでした。web上を検索して回ったのですが、良い解決策が見つからず、こちらにおすがりした次第です。文章ではうまく表現できずわかりにくいかもしれませんが、何か回避作があれば教えて下さい。
- ベストアンサー
- CSS
- IE8でサイドバーのレイアウトが崩れる場合の対処法
CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか？ 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- CSS
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- cssでの幅の分割（固定・可変混合）がうまくできません
画面左をコンテンツ（幅は可変）・右をメニュー領域（幅は固定）とするために２分割し，さらにコンテンツを２段に分けようとして，次のような構成にしてみたのですが思い通りになりませんでした． <div style="width:200px; height:600px; background-color:#ccf; float:right"> メニュー </div> <div style="width:auto; height:600px; background-color:#fcc;"> <div style="width:50%; height:550px; background-color:#6f6; float:right">コンテンツB</div> <div style="width:auto; height:550px; background-color:#ff6;">コンテンツA</div> </div> ２段組は丁度半分ずつにしたかったので，右（コンテンツBの部分）のwidthを50%，左（コンテンツAの部分）はautoにしました．ＩＥ６では希望通りコンテンツ領域の幅の50%で表示されているようですが，firefoxではメニュー領域も含めたウインドウ全体の50%と解釈されているようで，ＩＥとは表示が異なり困っています．どちらのブラウザでもコンテンツ領域をちょうど半分ずつにするにはどうすればいいでしょうか？ ちなみに，コンテンツ内の左右を共に50%とすると，どちらのブラウザでもレイアウトが崩れてしまいます．firefoxならそうなっても仕方ないと思いますが，ＩＥでも崩れてしまうのは疑問です．できればこの点にも配慮して両方とも幅を50%と指定しても崩れない方法をお教えください．
- ベストアンサー
- HTML
- 並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。 現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。 また、この大きなボックスは、常にセンターにある状態です。 ・トップから常に160pxのマージンが欲しい ・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為） ・右のボックスは自由に動く。 この状況で、左のメニューだけを固定することは可能でしょうか。 教えてください。 現在ソースは下記のようにしております。 【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box </div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
- CSSレイアウト(2列型)に関して
お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。 以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。 メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。 質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- CSSレイアウトでこのようなことはできる？
ホームページをテーブルを使用しないCSSレイアウトで作成しようと思います。 左右を分けるのにfloatを使用して作っています。 横幅は30%と70%で分けていますが、ブラウザの幅を小さくすると上下にずれてしまいます。 そこでブラウザで800px以下になった時は横バー表示するようにしたいです。 このようなことはできるでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
お礼
遅くなってすみません。教えてもらったやり方で、何とか期待するものに近いデザインを作れました。 ご丁寧にありがとうございました。