- ベストアンサー
DIVブロックを画面をはみ出して配置するには
- みんなの回答 (4)
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#1です。 > Cを固定にしたくない状態です。 ということでしたら、おそらく崩れてしまうのは仕方がないと思います。 IEではぎりぎり表示されたとしても、他ブラウザでは完璧にレイアウトは崩れてしまいます。 [スタイルシートによる崩れない 2カラム 3カラム・レイアウト] http://desperadoes.biz/style/dan/ の「TYPE C-2 左ボックスのみ幅固定」が一例になると思います。
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
AとCの長さが同じでなくてもいいなら、 要はBとCが重なっていればいい訳だから .boxbc{position:relative; border:1px solid #0000ff; } .aa{border:1px solid #ff0000;} .bb{width:200px; position:absolute; top:0px; left:0px; border:1px solid #fff222; } .cc{margin-left:200px; border:1px solid #ffaaff; white-space: nowrap;} <div class="aa">Aです。Aです。</div> <div class="boxbc"> <div class="bb">Bのメニューです。<br>横幅200px。absoluteでboxbcの左上起点でccのboxと重ねています。</div> <div class="cc">ここはCです。<br>ここはCです。<br>ここはCです。<br>左余白200pxを指定してメニュー(bb)と内容が被さらないようにしています。nowrapで右端で折り返さない指定です。IE6で確認していますが、他のブラウザではどうでしょう?。ここはCです。ここはCです。ここはCです。ここはCです。ここはCです。ここはCです。ここはCです。<br>ここはCです。</div> </div> floatを使う場合は横幅を指定しないといけなかったと思います。 横幅可変のboxには向かないんじゃないでしょうか。 よく分かってないですが。
お礼
重ねるという手段があったのですね。 Firefoxでは大丈夫でした。 この方法、よさそうです。 ありがとうございました。
- goldfox
- ベストアンサー率49% (123/249)
Bの幅は固定ですか? AはCに合わせて横幅が増えるのですか?
補足
Bは固定です。 AはCに合わせて横幅が増えると尚良いのですが、 BとCが並びさえすればよいです。
ひとつの大きな箱(下の例ですと.wrapper)で全ての<div>を囲ってしまうといいと思います。 CSS記述例 .wrapper{ width:700px;/* Aの横幅、B+Cの横幅と同じになるように */ } .A{ width:100%;/* wrapperで指定しているのでここでは100%で */ height:100px;/* 高さは任意 */ } .B{ float:left; width:200px;/* 横幅は任意 */ } .C{ float:left; width:500px;/* 横幅は任意 */ HTML記述例 <div class="wrapper"> <div class="A">テキストテキスト</div> <div class="B">テキストテキスト</div> <div class="C">テキストテキスト</div> </div>
お礼
ありがとうございます。 説明が足りなかったですね。 AがヘッダでBがメニュー、 Cが可変する内容なのですが、 Cを固定にしたくない状態です。 (帳票的な内容なので、横スクロールで2~3画面分になることも) テーブルだと、固定にしても、はみ出した分が勝手に広がりますが、 そのような形をdivで行いたいと考えています。 可能でしょうか?そもそも不可能でしょうか?
関連するQ&A
- CSSでDIVを複数囲むには
CSSでレイアウトをしているのですが、<div>で囲んだ画像Aと画像Bがあります。この2つの<div>を更にもう1つの<div>(以下、大DIV)で囲んでまとめたいのですが、うまくできません。その2枚の画像はそれぞれfloatでleftとrightに寄せているのですが、floatを適用させると大DIVの外に出てしまいます。 2つの画像を左右に寄せることは必須です。その後で、大DIVでまとめておけばあとでレイアウトの変更があったときに作業がスムーズに進むと思ったのですが。 これはどのようにすればよいのでしょうか?
- 締切済み
- HTML
- floatで並べた2つのdivの高さを揃えるには?
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか? 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- 締切済み
- CSS
- div内のテキストと画像の配置について
お世話になります。 現在CSSを勉強中なのですが、参考サイトを見てテーブルを使わずにdivとC SSで同じようなレイアウトが可能と知り、試してみたのですが、div内に配 置したテキストや画像の表示が思い通りになりません。 ソースは以下のような形です。 【HTMLの内容】 <div class="main"> <div class="main-menu">一行目テキスト<br />二行目テキスト</div> <div class="main-content"><img src="xxx.jpg"></div> </div> 【CSSの内容】 div.main { width: 500px; } div.main-menu { float: left; width: 300px; } div.main-content { float: left; } 上記に、以下の指定を追加したいと考えています。 1)main-menu内の「二行目テキスト」だけを右寄せにする。 2)main-content内の画像が常に縦位置の中央に表示されるようにする。 (main-menu内のテキストが複数行になり、divの縦幅が大きくなった場合に 画像も縦幅に合わせ中央に表示したいです。) この場合、どのような方法があるでしょうか? 勉強不足で大変恐縮ですが、よろしくお願いします。
- ベストアンサー
- HTML
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ3の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか? よろしくお願いします。
- 締切済み
- HTML
- IEだとdivが横に並びません
CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。 http://oshiete1.goo.ne.jp/qa3576983.html こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。 何が原因でしょうか。 HTML: <div id="main"> <div id="mainl"> </div> <div id="mainr"> </div> </div> CSS: #main { width: 900px; } #mainl { float: left; height: 317px; width: 324px; display: inline; padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; }
- 締切済み
- CSS
- 3カラムのレイアウト、及びdivの入れ子等
初めまして。 とても基本的なことでお恥ずかしいのですが、 3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。 どうぞ宜しくお願い致します。 下記のように、3カラムの段組みレイアウトを行いました。 左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、 中心部分(#contents)は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。 HTMLでは、可変?させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。 <CSS> #contents { margin-left:155px; margin-right:155px; } #left { float:left; width:150px; } #right { float:right; width:150px; } <HTML> <div id="left>あああああああ</div> <div id="right">いいいいいいい</div> <div id="contents">ううううううう</div> ここまでは、問題なく配置させられたのですが、 【#contents】の中に、<div>や<ul>などを使用すると、画像(http://blog.goo.ne.jp/ray-chimin)のような現象が起きます。 ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。 と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;) そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…? 可能な限りシンプルに、 正しいCSSの使い方でレイアウトしたいと考えております…!(>_<) divの不必要な多用? (ひとつひとつの画像をdivの中に入れたり、 横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造) は避けたいと思っておりましたが、 もしかして、それがいちばん正しいのでしょうか…? ご存じの方、どうぞご指南の程宜しくお願い致します! 散文、失礼いたしました!
- ベストアンサー
- HTML
- div要素を綺麗に並べたいのですが困っています。
CSSのレイアウトで困っています。 現在ショッピングサイトを作っているのですがCSSの表示で困っています。 item_boxというdiv要素の中に更にitem_aというdivタグで包んだ商品写真とテキストのBOXをfloatで左に回りこみ させ横3列に並べています。 1段目だけなら表示に問題ないのですが2段目以降になると1段目の商品BOXの高さによっては横一列に綺麗に並びません。 何か良い解決策は無いでしょうか? item_aにheightを指定すればいいのですが文字数によってはテキストが切れたり、または下に空洞が空きすぎたりするのでheight指定は避けたいです。
- 締切済み
- CSS
- div要素を綺麗に並べたいのですが困っています。
CSSのレイアウトで困っています。 現在ショッピングサイトを作っているのですがCSSの表示で困っています。 item_boxというdiv要素の中に更にitem_aというdivタグで包んだ商品写真とテキストのBOXをfloatで左に回りこみ させ横3列に並べています。 1段目だけなら表示に問題ないのですが2段目以降になると1段目の商品BOXの高さによっては横一列に綺麗に並びません。 何か良い解決策は無いでしょうか? item_aにheightを指定すればいいのですが文字数によってはテキストが切れたり、または下に空洞が空きすぎたりするのでheight指定は避けたいです。
- 締切済み
- CSS
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか? <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか?
- 締切済み
- HTML
- marginと配置について教えてください。
以下のサンプルですが2点教えていただきたいことがあります。 1点目 何故box-Aの左側が200pxになるのか? 2点目 box-Aとbox-Bの上の部分が同じ高さにならずbox-Aが少し下になるのか? よろしくお願いします。 <body> <div id="box-A">a</div> <div id="box-B">b</div> <div id="box-C">c</div> </body> ------------------------------------------------- div { margin: 100px; border: 5px solid #blue; width: 100px; height: 100px; } div#box-A { float:left; background-color: black; } div#box-B { background-color: black; } div#box-C { background-color: black; }
- ベストアンサー
- HTML
お礼
非常に分かりやすいサンプルありがとうございます。 参考にいろいろとやってみたいと思います。