floatのclearfixで謎の空間が出現
- floatのclearfixで右側の「フロートテスト」という横並びのブロックがすぐ下に並ばない問題が発生しています。
- clearfixを削除すると、目的通りの縦に並んだ状態になりますが、wrapperが高さを持たないボックスになります。
- フロートが悪いのか、clearfixの設定or使い方が悪いのか、原因が不明です。
- ベストアンサー
float の clearfixで謎の空間が出現
現在、図のように表示されています。 本来であれば右側の「フロートテスト」という横並びのブロックがすぐ下に並んで表示させたいのです。 しかし、2つめが左側のサイドバーの終わりから表示されています。 サイドバーにも「フロートテスト」にもfloatとclearfixを使用しています。 clearfixを削除すると、wrapperが高さを持たないボックスになりますが、目的通りの縦に並んだ状態になります。 フロートが悪いのか、clearfixの設定or使い方が悪いのか。 原因が不明で悩んでおります。 よろしくお願いします。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="ja" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>test</title> </head> <body style="background: #ffe6e6;"> <div id="wrapper" style="width:800px;background:#ffffff;border:1px solid red;" class="clearfix"> <div id="sidebar" style="width:200px;float: left;"> <div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> <div> <div style="border:1px solid #ccc;"> <p style="FONT-WEIGHT: bold; TEXT-ALIGN: center">サイドメニュー</p> </div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> </div> <!-- /sidebar --> <!-- contents --> <div id="contents" style="margin-left: 200px;" class="clearfix"> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> </div><!-- /contents --> </div><!-- /wrapper --> </body> </html> common.cssで読み込んでいるclearfix の部分 .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; /* Hides from IEmac \*/ } .clearfix { display: block; }
- muuuuu
- お礼率75% (101/133)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
contentsはfloatしてないのに、その直下でclear:bothしたから、 直近のfloatされた要素であるsidebarの下までズズいとclearされ たんでしょう。多すぎるDIVを整理すれば把握出来るはず。 body部分は <body style="background: #ffe6e6;"> <div id="wrapper" class="clearfix"> <div id="sidebar"> <ul> <li><a href="index.html">サイドメニュー</a></li> <li><a href="index.html">サイドメニュー</a></li> <li><a href="index.html">サイドメニュー</a></li> </ul> <h3>サイドメニュー</h3> <ul> <li><a href="index.html">サイドメニュー</a></li> <li><a href="index.html">サイドメニュー</a></li> <li><a href="index.html">サイドメニュー</a></li> </ul> </div> <!-- /sidebar --> <!-- contents --> <div id="contents"> <p>フロートテスト</p> <p>フロートテスト</p> <p>フロートテスト</p> <p>フロートテスト</p> </div><!-- /contents --> </div><!-- /wrapper --> </body> これで充分。あとはスタイルシートが BODY,DIV { margin:0;padding:0;} H3 { border:solid grey 1px;text-align:center;} #wrapper { width:800px;background-color:white;border:solid red 1px;} #sidebar {width:200px;float:left;} #contents {width:600px;float:left;} #contents P {width:298px;margin:0;padding:1em 0;border:solid green 1px;float:left;} .clearfix:after {content:".";display:block;clear:both;height:0;visibility: hidden;} このくらいあれば大丈夫。
関連するQ&A
- float+IE8で形が崩れます。
float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下のHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか？ これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？ なかなかうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- clearfix の後marginが効かない
はじめました。web制作初心者です。 ご教授お願い致します。 グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。 すると次の<div>以降のmargin-topが効きません！！ 今のブラウザはIEです。 <div id="wrapper"> <div id="navi"> <ul> <li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li> <li class="drink"><a href="" title="ドリンク">ドリンク</a></li> </ul> </div> </div> <!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ --> <!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ --> <div id="contents" class="clearfix"> <div id="left"> <div id="kodawari"> <img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" /> </div> </div> </div> </div> #wrapper { width: 900px; } #navi ul, #navi ul li{ float: left; } /* afterに対応したブラウザ向け */ #contents .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* IE6 */ * htm .clearfix { height: 1%; } /* IE7 */*:first-child+html .clearfix { height: 1%; } #contents { width: 900px; padding-top: 5px; padding-right: 13px; padding-left: 12px; } #contents #left { width: 660px; margin-top: 15px; ←これが効かない } ごめんなさい。このCSSでわかりますでしょうか？ よろしくお願い申し上げます。
- ベストアンサー
- CSS
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- floatがうまくいきません。
以下のスタイルシートに設定したのですが、 #content の幅をぴったしの値 width: 640px; にするとレイアウトが崩れてしまいます。 どこが間違っているのでしょうか。 また、参考になるページがあれば教えてください。 <body> <div id="wrapper"> <div id="header"> </div> <div id="pagebody"> <div id="navigation"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> body { margin: 0; padding: 0; } #wrapper { width: 760px; border-style: solid; border-color: red; border-width: 5px; } #header { width: 750px; height: 85px; border-style: solid; border-color: blue; border-width: 5px; } #pagebody { width: 750px; height: 500px; border-style: solid; border-color: orange; border-width: 5px; } #navigation{ width: 90px; height: 490px; border-style: solid; border-color: green; border-width: 5px; float: left; } #content{ width: 636px; height: 490px; border-style: solid; border-color: yellow; border-width: 5px; } #footer{ width: 750px; height: 30px; border-style: solid; border-color: bluck; border-width: 5px; }
- 締切済み
- CSS
- 初心者です。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
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- リストタグ, float:left; operaで
下記のようにリストタグで [リンク][ 説明 ] というデザインにしたいと思っています。 リンク部分はマウスを当てると浮き出るようにしています。 これがIEとfirefoxではうまく表示されますがoperaではうまく表示されません。 [説明]の部分の<li>が[リンク]部分の<li>を無視して表示されてしまいます。 marginで場所あわせをするとリンクボタンを押したときに全体が動くようになってしまいます。 テーブルタグを使うと、IEで見た場合リンクのボタンがうまく動かないのでテーブルタグはだめっぽいです。 なにか解決案はございますでしょうか？よろしくお願いします。 <!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=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css"> <!-- a.link-a{ display:block; width:150px; height:30px; text-align:center; line-height:30px; background-color:#ccddff; } a.link-a:hover{ margin:-2px 0 0 -2px; border:solid #492E07; border-width:0 2px 2px 0; } a.link-a:active{ border-width:2px 0 0 2px; } ul.link{ margin:3px 0; ist-style-type:none; clear:both; } li.float-1{ float:left; width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.float-2{ width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } li.margin-1{ width:150px; height:30px; line-height:30px; border:solid #6A5D50; border-width:0px 0px 1px 0px; } li.margin-2{ margin:-31px 0px 0px 150px; width:530px; line-height:30px; padding:0 0 0 20px; height:30px; background-color:#ebebeb; border:solid #6A5D50; border-width:0px 1px 1px 0px; } --> </style> </head> <body> <ul CLASS="link"> <li CLASS="float-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="float-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> <ul CLASS="link"> <li CLASS="margin-1"><a class="link-a" HREF="http://okwave.jp/">OKWAVE</a></li> <li CLASS="margin-2">日本初、最大級のＱ＆Ａサイト ＯＫＷＡＶＥ</li> </ul> </body> </html>
- ベストアンサー
- HTML
- floatについて
■ □ と並んでいた場合■にスタイルシートでfloat:leftとすると□が右にきますよね。( ■□となる) それで私はfloat:leftは『次に来る要素を自分の右に移動させる』と 解釈してました。 それで質問なのですが以下のタグの場合どうして最後に(.set1)にfloat:leftが必要なのでしょうか？ 次に要素がきていないからあっても意味がないと思ったのですが、実際 はずしてみると間に幅ができてデザインが崩れてしまいます。 また全体の枠を見えるよう最初のdivに.wakuで設定したのですがfloat:leftがあるときには長い一本の線になってしまいます。 どうしてこうなるのでしょうか？ <html> <head> <style type="text/css"> .waku{border-color:#cccccc;border-style:solid;border-width:3px;} .set1{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;float:left;} .main{border-color:#cccccc;border-style:solid;border-width:1px; width:500px;height:500px;background-color:white;color:#ffffff; margin:0 2.5;font-weight:bold;float:left;} .set2{border-color:#cccccc;border-style:solid;border-width:1px; width:150px;height:500px;background-color:white;font-weight:bold; color:#ffffff;margin:0 2.5;float:left;} </style> <div class="waku" align="center"> <div class="set1"> <div>左1</div> <div>左2</div> </div> <div class="main">真ん中</div> <div class="set2">右</div> </div>
- ベストアンサー
- HTML
- floatを使ってリストを並べたところ
floatを使ってリストをならべたところ、それ自体はちゃんと表示されるのですが、別の部分がIEで表示されなくなりました（FireFoxでは表示されます）。 float要素を取り払うと、消えてしまう部分はちゃんと表されているので、floatに何か問題があるようなのですが…。 お分かりになられるかた、ご助言いただければ助かります。 以下、記述を書きます。 CSS記述 .catch{ margin:10px; font-size:20px; } .w-icon ul{ list-style-type:none; margin:0px; } .w-icon li{ float:left; text-align:center; } .w-icon a{ display:block; width:110px; height:25px; text-decoration:none; } HTML記述 <div class="catch">キャッチコピー</div> 本文 <div class="w-icon"> <ul> <li><a href="#">メニュ－１</a></li> <li><a href="#">メニュ－２</a></li> <li><a href="#">メニュ－３</a></li> </ul> <div style="clear:both;"></div> </div> 以上のように記載したところ、キャッチコピーの部分から本分の途中までブランク表示になります。 カーソルで選択すると文字は出てくるのですが…。 どうぞよろしくお願い致します。
- ベストアンサー
- CSS
- hover擬似要素をかけるとfloatでの段組が崩れる
宜しくお願い致します。 以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6（他ブラウザは現在確認出来ていません）でマウスを乗せると、floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んでしまいます。 原因にお気付きの方は、どうかご指摘頂けます様、お願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift-JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- /* 全体 -------------------------------------------------- */ body { background-color: ivory; width: 800px; margin: auto; font-size: small;} /* コンテナ -------------------------------------------------- */ div#container { width: 948px; border-left: 1px solid maroon; border-right: 1px solid maroon; background-color: white;} /* 段組 -------------------------------------------------- */ div#main { width: 700px; padding: 10px; float: right; border-left: dashed 1px maroon;} div#navigation { padding: 10px;} /* clearfix */ div#contents:after { content: "."; display: block; clear: both; height: 0px; font-size: 0px; visibility: hidden;} div#contents { display: inline-block; min-height: 1%;} /* Mac版IE用ハック開始 \*/ * html div#contents {height: 1%;} div#contents {display: block;} /* Mac版IE用ハック終了 */ /* 見出し -------------------------------------------------- */ h1 { background-color: maroon; font-size: xx-large; color: #ff9999; margin: -10px -10px 0px -10px; padding: 13px 13px 3px 13px; text-align: center;} /* ナビゲーション -------------------------------------------------- */ div#navigation ul { margin: 0px 0px 0px -10px;} div#navigation li { list-style-type: none; margin: 10px auto; width: 160px;} div#navigation a { text-decoration: none; display: block; width: 100%; font-weight: bold; color: #ff9999; padding: 3px; text-align: center; background-color: maroon; border: outset 3px maroon;} div#navigation a:hover { border: inset 3px maroon;} /* フッター -------------------------------------------------- */ address#footer { margin: 0px -10px -10px -10px; padding: 3px 13px 13px 13px; background-color: maroon; color: #ff9999; text-align: right;} --> </style> </head> <body> <div id="container"> <h1>ページタイトル</h1> <div id="contents"> <div id="main"> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </div> <div id="navigation"> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">abc</a></li> <li><a href="" title="">def</a></li> <li><a href="" title="">ghi</a></li> <li><a href="" title="">jkl</a></li> <li><a href="" title="">mno</a></li> <li><a href="" title="">pqr</a></li> </ul> </div> </div> <address id="footer">フッター</address> </div> </body> </html>
- ベストアンサー
- CSS
お礼
ありがとうございます。 目的通りに表示させることが出来るようになりました。 floatとfloatじゃないものを組み合わせは気をつけないといけませんね。 勉強になりました。