- ベストアンサー
HTML、floatでのscrolバーの出現の有無
- HTMLのfloatを使用した場合、要素の幅に応じてスクロールバーが表示されるかどうかが変わります。
- 要素の幅をpx指定した場合、要素が指定した幅まで縮小された後にスクロールバーが表示されます。
- 要素の幅を％指定した場合、要素の幅がブラウザの幅を上回ると要素が改行され、スクロールバーが表示されます。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- floatについて
IEだといいんですが、MacのIE5.17,OS9.2で表示がおかしくなってしまいます。 <div id="container"> <div id="nav">・・・</div> <div id="main">・・・</div> </div> で、 #container {width:760px;} #nav {width:160px;float:left;} #main{width:580px;float:right;} とすると、div#mainが「改行されて」右寄せになります。「改行なし」で右寄せにするにはどうしたらいいのでしょうか？ #navと#mainは、合計740pxで#containerに余裕を持たせてるんですが…
- 締切済み
- HTML
- CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- floatを使ったレイアウトのくずれについて
Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし（各々width,paddingの合計）containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>
- ベストアンサー
- CSS
- 並んだ２つの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
- <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でレイアウトした後にcleafixは必ず必要ですか？
いつもお世話になっております。 早速質問ですが、floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 例えば以下のレイアウトでテキストを組んでみたのですが、winXPのIE7、IE6、opera9、FireFox3、では問題なく表示されていました。 それで外枠のBOXの幅が設定されており、float指定した要素の親要素に高さの指定があり、float指定した要素の親要素の下に外枠と同じ幅の画像やdivがあればclearfixを記述しなくてよいのではと考えたのですが、仕事でWEBを制作しないといけない為、確認しておきたくて投稿しました。 ご回答を宜しくお願いします。 〔XHTML〕 <body> <div id="wrapper"> <div id="header"> <div id="header01">AAA</div><div id="header02">BBB</div> </div><!--end header--> <div id="pankuzu">ccc</div> <div>111</div> <div>222</div> </div><!--end wrapper--> </body> 〔css〕 #header{ text-align:left; width: 900px; height:150px; } #header01 { float: left; width: 400px; } #header02 { float: left; width: 450px; height: 150px; } #pankuzu{ width: 900px; height: 20px; background-color:#999; }
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
- StyleSheet：float 使用時、テキストが指定幅を超える
お世話になります。 スタイルシートの設定について、質問させてください。 下記のようなページを作ったところ、 main_left内のテキストが指定した400pxを超え、 main_rightがmain_leftの次の段落に回り込んでしまいます。 テキストが400を超えないようにするには どうすればよいでしょうか？ もっと具体的に言えば、 http://www.geocities.jp/multi_column/float/sample/float.html このサイトのようにしたいだけなのですが、 どこが間違っているのかがわからず困っています。 --------------------------------------- index.html --------------------------------------- <html><head><link rel="stylesheet" href="main.css" type="text/css" /></head> <body> <div id="main"> <div id="main_left"> 123456789012345678901234567890123456789012345678901234567890</div> <div id="main_right"> 12345678901234567890123456789012345678901234567890</div> </div> </body></html> --------------------------------------- main.css --------------------------------------- #main { width:600px; } #main_left { float:left; width:400px; background-color:#CCFF99; } #main_right { float:right; width:190px; background-color:#FFCC99; } --------------------------------------- 以上、ご回答よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
a+b以上にmin-widthを設定すると希望通りになりました！ 的確なご支持有難うございました。