- ベストアンサー
可変幅でブラウザ縮小表示によるカラム落ちを防ぐ方法
お世話になります 以下のように可変幅のdiv要素にボックスA,B,Cをfloat:left、Dをfloat:rightしたナビゲーションがあるのですが、可変幅でブラウザ縮小表示によるカラム落ちを防ぐにはどのようにすればよいのでしょうか？固定幅であればボックスを内包する親要素に固定幅を設定すれば済む話だと思いますが。よろしくお願いします。 +--------------------+ [A][B][C]----------[D] +--------------------+
- briantaphy
- お礼率52% (25/48)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 固定幅で3カラムの記述方法を教えて下さい。
ブログCGIを使おうと思うのですが 使わせて頂きたいスキンが、３カラム（可変幅）なので 中央固定幅の３カラムに変更したくて悩んでいます。 全く思い通りにいかず四苦八苦しておりまして 助言頂ければ大変助かります。 以下ソースですが 自分なりに調べてはみたものの 手を加えるとフッターが上にきたり 右バーが重なったりと、全く手におえず 助言お願いします。 /* ----- 基本構造 -------------------------------------- */ div#container { } div#mainbody { } div#header { float: none; clear: both; height: 80px; } div#menu { float: none; clear: both; height: 30px; } div#logs { margin: 0px 200px 10px; } div#navigation { width: 180px; position: absolute; left: 10px; top: 110px; } div#information { width: 180px; position: absolute; right: 10px; top: 110px; } div#diary, div#comment, div#trackback { } div#page, div#navi, div#work, div#canvas { float: none; clear: both; } div#comment, div#trackback, div#contents, div#form, div#env, div#status { float: none; clear: both; margin: 10px 10px 0px; padding: 0px 0px 5px; border: 1px solid #666666; background-color: #FFFFFF; } div#logs div#comment, div#logs div#trackback, div#logs div#contents, div#logs div#form { margin: 10px 0px 0px; } div#footer { float: none; clear: both; margin: 0px 200px; } div#work { width: 190px; position: absolute; left: 10px; top: 120px; } div#admin { margin: 10px 0px 0px 190px; } 本体CGIは web-liberty様のWeb Diary Professional http://www.web-liberty.net/ スキンをお借りしたのは 海月屋様のSimple1、３カラム http://kurageya.xrea.jp/pc/skinsample/wl/simple1/3.html
- ベストアンサー
- CSS
- 【CSS】横３カラム：左右は固定pxで中央カラムはが残り幅となるにはどうすれば？
http://www.amazon.co.jp/ のように、 横３カラムで、全体は１００％、一番左カラムと一番右カラムは固定px、真ん中のカラムは100%-左カラム固定pxー右カラム固定pxで、 ウィンドウをリサイズしても、この状況が変わらない・・・ というようなCSS（JSもからむのでしょうか？）は、どのようにすればつくれるのでしょうか？ <div style="float:left;"> 左カラム </div> <div style="float:right;"> 右カラム </div> <div> 中央カラム </div> 。。。だと、中央カラムが縦長になるとはみ出してしまいますよね・・・。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- ２段組レイアウトのCSSについて。左幅：可変/右幅：固定
http://desperadoes.biz/style/dan/1-g.html こちらのような２段組を想定しています。 （ブラウザウィンドウのサイズを変えたりして、スタイルの効き方を確認してみて下さい。） 上記ページの例ですと、左幅：固定、右幅：可変となっていますが、 私が希望するのは、その逆です。 つまり、左幅：可変、右幅：固定です。 どのようなスタイルを指定すれば良いか、どなたか教えて下さい。 --------------------------------------------- ちなみに、上記ページのスタイルは、 http://desperadoes.biz/style/dan/ で確認できます。 「TYPE C-4 左ボックスのみ幅固定。幅 : 100%」のタイプになります。 --------------------------------------------- 私の考えでは、右と左を逆にすれば、目的を達成できるのかな？ なんて思い、下のように記述してみましたが、ダメでした。 #my_navigation {margin-right: 150px;} #my_contents {float : right ; width : 150px ;}
- ベストアンサー
- HTML
- ファイヤーフォックスでカラム落ちします。
下記サイトを作っているのですが、東京都世田谷区認可保育園という部分と画像を変える四つの画像が画面を縮小するとファイヤーフォックスでカラム落ちします。 下記をやってみても治りません。どうすれば治るのでしょうか？ http://okwave.jp/qa/q3719369.html 初めまして。 FireFoxやsafariなどの正規表現に忠実なブラウザでは ────────────────────────── width(550px)＋padding(50px)＝実際に表示される横幅 ────────────────────────── となります。 つまり、#Aの横幅に対して#B＋#Cの値の方が大きくなってしまっているので、結果として、収まらなかった#Cが下に追いやられてしまっている、という具合です。 width550pxがwidth(550px)＋padding(50px)より小さくなってカラム落ちする。 対処法としては ────────────────────────── <div style="横幅を指定">ここにmargin <div style="余白を指定">内容物</div>ここにpadding </div> ────────────────────────── このように相性の悪いプロパティは、各要素に対して一つずつ指定する事で全てのブラウザに対応出来ます。 http://sample1.digi2.jp/kindergarten2/index.html
- ベストアンサー
- HTML
- 固定幅＋可変幅レイアウトがなぜこれで実装可能？
cssで、固定幅＋可変幅レイアウトについて、下記コードのようにやったら実現できたのですが、 なぜ右カラムのwidthが100%でも、ブラウザの横幅いっぱいでなく、 望みどおりに実現できてしまっているのでしょうか？ 結果オーライではありますが、理屈が知りたい＆後学のために、 理由をお教えいただければ幸いです。 (下記では見やすいようにタブを全角空白４文字に変換しています。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>2カラムレイアウト(左固定幅、右リキッド)</title> <meta name="description" content="2カラムレイアウト(左固定幅、右リキッド)"> <meta name="keywords" content="CSS,2カラムレイアウト,左固定幅,右リキッド"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> * { margin: 0; padding: 0; } #header { width: 100%; height: 150px; background-color: #808080; } #container { width: 100%; } #left { width: 200px; background-color:#A9A9A9; float: left; } #right { width: 100%; background-color:#DCDCDC; } #footer { clear: both; width: 100%; height: 150px; background-color: #808080; } </style> </head> <body> <div id="header"> <p>ヘッダー</p> </div> <div id="container"> <div id="left"> <p>左あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p> </div> <div id="right"> <p>右いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> </div> <div id="footer"> <p>フッター</p> </div> <p><a href="#" onClick="history.back(); return false;">戻る</a></p> </body> </html>
- ベストアンサー
- CSS
- 【CSS】左右可変、中央固定の３カラムレイアウト
ボックス３つを横一列に、 center：画面中央配置、幅は900px固定 left：残りの左領域全て（幅可変） right：残りの右領域全て（幅可変） というレイアウトをしたいのですが、CSSでの指定方法が解らず困っています。 ２カラムや左右固定・中央可変の３カラムレイアウトは様々なサイトで解説されているのですが、 このパターンは中々無いようで見つかりませんでした。 良い方法をご教示いただければと思います。 宜しくお願いします。
- ベストアンサー
- CSS
- IE でカラム落ちします。
CSS 初心者です。 pagebodyの中に ２カラム（mainContentとsidebar1）レイアウトをしたいのですが、 IE6だけ左のmainContentがカラム落ちしてしまいます。 検索して色々試したのですが、私には理解ができず。 教えていただけると助かります。 ーーーーーcssーーーーーーー #container { width: 800px; background: #FFFFFF; margin: 0 auto; text-align: left; } #pagebody{ width: 780px; background: #D6E3FF; } #mainContent { float: leftt; width:600px; padding:0; background: #fff; } #sidebar1 { float: right; width:170px; background: #D6E3FF; } -------html------------- <body> <div id="container"> <!--navi上--> <script src="../js/h_navi.js" type="text/javascript"></script> <div id="pagebody"> <div id="sidebar1"> <ul> <li id="menu1"><a href="#">専属プロヂュース</a></li> <li id="menu2"><a href="#">出演依頼</a></li> <li id="menu3"><a href="#">メンバー紹介</a></li> <li id="menu4"><a href="#">ニュース</a></li> <li id="menu5"><a href="#">最新ニュースはこちらから</a></li> </ul> </div> <!-- end #sidebar1 --> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>テキスト</p> <p>テキスト.</p> <h2>見出し </h2> <p>テキスト</p> <!-- end #mainContent --></div><br class="clearfloat" /></div><script src="../js/footer.js" type="text/javascript"></script> </div> </body> よろしくお願いします。
- 締切済み
- CSS
- 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
- 横並びリスト ブラウザ縮小 カラム落ち
よろしくお願いします。 ulとliで横並びの商品リストの様なものを作成していて、 ようやく完成したと思っていたのですが、 ブラウザの拡大/縮小機能を使って、 少しでも縮小するとカラム落ちが発生してしまいます・・・。 完成したと思っていたので焦っております(汗) 簡単にソースを記載しますので、 原因と対策がわかりましたら、どうか回答宜しくお願いします。 ul{ width:720px; list-style:none; } li{ width:142px; border:1px solid #000; float: left; } このような感じで、ulには別にクラスを指定して、clearfixも指定しています。 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ ulの全体720pxを5個のliで割って、144pxとなり、 そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、 間違っているのでしょうか？ liの幅を144pxにしてborderを指定しない場合は、 縮小してもカラム落ちは起こりません。 初歩的なことかもしれませんが、 どうぞよろしくお願いします。
- ベストアンサー
- CSS
お礼
なるほど、いけました！ＩＥ６等のブラウザの場合もう少し工夫する必要があるみたいですが、これを元に調べてみます！ありがとうございます！