- ベストアンサー
floatの後にclearしなくても崩れない？？
http://www.cosmos.gr.jp/index.html こちらのサイトのグローバルナビ （ホーム・サービス案内・コラム・会社案内・採用情報）には、 liを使ってそれをfloat:left;で並べていますが、その後に このfloatを解除していないにもかかわらず、 表示が崩れていないのはなぜでしょうか？ いったいどうやって回避しているのかわかる方、 お手数ですがご回答よろしくお願いします＞＜
- infinity38
- お礼率74% (86/116)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
heightを使って通常フローでの高さを確保しているようです。 他にテクニックとしてoverflow:hidden;やclearfixという方法もあります。
関連するQ&A
- 【CSS】float:left; を使用した２カラム、本文中でclearすると間が空いてしまう
お世話になります。 左がメニュー（仮称・BOX-A、float:left指定）、右が（仮称・BOX-B）本文、下にフッター（clear: both）…といったページを作成しています。 問題は、本文・BOX-Bにおいて、縦長の画像を使用した場合、文章を画像の右に回りこませたい時があります。 ↓ ↓ ↓ <img src="xxx.jpg" style="float:left; width:100px"> 画像回り込み文章～～～文章 <br style="clear:left"> 通常の文章 ----------------------------------------------------------- しかし、これを行ってしまうと、BOX-Aのfloatも解除されてしまい、BOX-Aの内容（高さ）分、 BOX-Bの『通常の文章』が表示される位置に空間ができてしまうのです。 …以下のURLが、その状態の例です。 http://www.geocities.jp/multi_column/practice/sample/2column2_fixed_liquid_poor.html 上記サイト様の、 http://www.geocities.jp/multi_column/practice/2column2.html#liquid の、ページ半ば…よりやや下に、上記問題点を克服するという 『メインカラム幅可変、サイドバー幅固定 2カラム（ネガティブマージン型）』 の説明が載っているのですが、同じように組んでも上手く行きません…。 本文中（BOX-B）で、floatのclearを行っても支障がなくなるようなCSSの組み方はありませんでしょうか？ 何卒、宜しくお願い致します。
- ベストアンサー
- HTML
- <li>をfloat,inlineさせたときのセンタリング
スタイルシートを用いて、ナビゲーションバーを作っています。 リスト<li>をfloatさせて、横に長いものにしていますが、 1行では収まらないため、2行になっています。 リストにfloat:leftとinlineを指定することで、普通のテキストのように<div>ボックス内に流し込んで、端でいっぱいになったところで自動的に改行させています。 <div id="header"> <ul id="navi"> <li>トップ</a></li> <li>ページ１</li> <li>ページ２</li> <li>ページ３</li> </ul> </div> #header #navi li{ float:left; display: inline; } 実際には10個ぐらいあるのですが、説明のため上のように4つのアイテムがあるとして、説明すると、今は トップ ページ１ ページ２ と表示され、次の行で、"トップ"の左側に揃って ページ３ が表示されます。 やりたいことは、1行目のちょうど真ん中、（この場合"ページ１"の下あたり）に"ページ３"を表示させたいのです。 #header{ text-align:center; } または #header ul{ text-aligne:center; } で良いのかと思ったのですが、うまくいきません。 こういったことはできるのでしょうか？ そもそも、やり方がまちがっていますか？ <li>に対してfloatを解除すると、センタリングされるのですが、<li>同士の間にスペースが出来てしまいます（バックグラウンドに色が付いているので）。どちらかというとこちらをなんとかするようにしたほうがいいのでしょうか？
- 締切済み
- HTML
- floatでカラム落ちを防ぎたい
少し長いですがお付き合いよろしくお願いいたします。 <style type="text/css"><!-- body { text-align:center; } #all { width:730px; margin-left:auto; margin-right:auto;; text-align:left; background-color:#33ffcc} #left{width:50%; float:left;} #right{width:50%; float:left;} --></style> </head> <body> <div id="all"> <h1>見出し1</h1> <div id="left"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> <div id="right"> <h2>AAA</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>BBB</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>CCC</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>DDD</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <h2>EEE</h2> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div> </div> このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。 この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。 どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか？ 条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。
- ベストアンサー
- CSS
- cssのfloatについて質問です。
cssでfloatを使い3カラムで表示しています。 クラスは左からleft,centre,rightと振っています。 やりたいことはウィンドウサイズを縮めた時にカラム落ちするのではなく、 rightのdivをlefr,centreの下に潜り込ませたいです。 イメージ的にはleft,centreのz-indexが1に対し、rightが0で下に入るように縮めたいです。 できればpositionは使いたくないです。 flexboxでも試してみましたが、比率が変わりいい感じに縮むのですが、下に潜り込ませることはできませんでした。 もしなにかアドバイスがあれば宜しくお願い致します。
- ベストアンサー
- CSS
- clear:bothなしで解除！？
http://www.monexgroup.jp/ こちらのサイトのロゴにはfloat:left; よくある質問、お問い合わせにfloat:right; English 中文みにfloat:right; の設定がされていますが、その後にclear:both; の記述がどこにもされていないのですが、 どうやって回り込み解除なされてるのでしょうか？ 探っていたのですが、まったくわかりません； 分かる方、どうかご教授お願いいたします＞＜；
- ベストアンサー
- HTML
- CSSで、何故か、「float」が上手く効かない
詳しく書きますと、前回した質問、 http://okwave.jp/qa/q7786505.html の続きになります。 ちなみにこれは、今の所、解決した次第です。 しかし、新たな場面に直面している最中であります。 http://sky.geocities.jp/thanksv0358/index.html# 質問は、上記で作成しているページについてです。 その内容ですが、ページ中程にある「 今月のおすすめ 」とある、すぐ下の「 見出し3 」という2つの項目を先頭行にして、横一列にそろえて表示したいと思いました。 そのため、項目内容をHTMLで、 <div class="left"> ～ </div> と、 <div class="right"> ～ </div> で囲い、その後、それぞれをCSSで、 .left{ float:left; } .right{ float:right; } としたにもかかわらず、何故か中途半端な形で、ずれている状態が確認できます。 これが現在、意味不明な箇所になっています。 ここで質問ですが、この場合、どうすれば「 見出し3 」の文字2つを並列に表示できますでしょうか？ 詳しい方がいましたら、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 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
- 初心者です。floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません
floatでレイアウトしてるのですが、縦線とテーブルの間を広げる方法がわかりません メニューとコンテンツが縦線で区切られてるのですが右側のテーブルと縦線が合体してしまいます。 縦線とテーブルの間に少し隙間を作りたいのですが、どうすればいいでしょうか？ HTMLとCSSを書いておきます。よろしくお願いします。 ・HTML <div id="contents"> <table> <tr> <td>×</td><td><p>あああ</p> </tr> <tr> <td>○</td><td><p>いいい</p> </tr> <tr> <td>■</td><td><p>ううう</p> </tr> </table> <br><br> a </div> <div id="left-menu"> <ul> <li><a href="index.html" class="a8">メニュー</a></li> <li><a href="league.html" class="a8">メニュー</a></li> </ul> </div> <div id="footer"> ああああああ </div> ・CSS body { width: 900px; } #contents { float: right; width: 740px; border-left: 1px solid #999;} #left-menu { float: left; width: 150px;} #footer { clear: both; }
- 締切済み
- 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
- ２重フロートの１つだけの解除のしかたについて
左右段組のWebページをfloatを使って作っています。 <div class="column01">と <div class="column02">をつくり 01が左メニュー、02が右本文です。 その02の子階層でimgをさらに「float」しました。 以下のような構造です。 div.column01{float:left} div.column02 └div.img-box └img{float:left} └p └div.txt-box で、上でいう「div.txt-box」から「float」を 解除したいのですが 「clear:left」を使うと、一部のブラウザでは ２つの「float」とも解除され、下のように divがcolumn01の下にまでいってしまいます。 column01 column02 ↓ ↓ □□□ ■■△△△ □□□ ■■△△△ ←div.img-box □□□ △△△△△ □□□ □□□ ××××× ××××× ←div.txt-box ちなみに「clear:left」は 「div.txt-box」に指定したり、不本意ながら 構造図での「p」要素の次を<br>し その<br>に指定したりしましたが、同じです。 ◆質問１◆ 「clear」は直前の親要素に対して のみ有効というわたしの理解は合っていますか？ ブラウザのバグなのか、わたしがおかしいのかを教えてください。 ◆質問２◆ 意図通りにいかないのは 「Netscape4.73」ですが、解消方法があれば どうぞお教えください。 参考ページのご紹介でもうれしいです。
- ベストアンサー
- HTML
お礼
なるほど！ご回答ありがとうございました☆