ベストアンサー

floatを使った時のブラウザでの違い

2006/11/19 23:32

ブログにてfloatを使い、下記のように表示させたいのですが、 IE7では思い通りに表示できるものの、Firefox2.0ではうまく表示できず困っています。本来、日付　　　　タイトルカテゴリ -------------------- 日付　　　　タイトルカテゴリ -------------------- このようにしたいのですが、Firefoxで確認すると、日付　　　　タイトルカテゴリ -------------------- 日付　　　　タイトルカテゴリ -------------------- 日付　　　　タイトルカテゴリ -------------------- と、最新エントリーのタイトル（class="right"）と、区切り線（class="end"）の間だけがかなり空いてしまいます。これはブラウザのバグなのでしょうか。それともスタイルシートの記述が間違っているのでしょうか。よろしくお願いします。なお、タグとcssは以下のように書いています。【タグ】 <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> 【css】 div.left {float: left;width: 100px;} div.right { } div.end {clear: both; border-bottom: 1px dotted #000000;}

noname674
お礼率100% (17/17)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Icefox
ベストアンサー率50% (1/2)

2006/11/20 22:48 回答No.2

初めまして。自分も良く分かってないかも知れませんが、質問の記事からそのままコピーして下のソースで表示させたらFirefox1.5、2.0、及びIE6とIE7では同じに表示されてますよ。2.0も間は空いてません・・・コピーした記述なので、間違ってはないと思うのですが・・・【ソース】 <html> <head> <style type="text/css"> div.left {float: left;width: 100px;} div.right { } div.end {clear: both; border-bottom: 1px dotted #000000;} </style> <body> <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> <div class="left"> 日付<br /> カテゴリー</div> <div class="right">タイトル</div> <div class="end"></div> </body> </html>

質問者

お礼 2006/11/21 12:41

お忙しいところを確認してくださいましてありがとうございます。長文を避けるため、文章を省いているうちに、教えていただくにあたり、肝心なところまで消してしまっていたことに気づきました。申し訳ありません。ブログにてPHPのループを使っているのですが、htmlが間違っていないとすると、タグの記述に問題があったのかもしれないです。もう一度確認してみます。ご回答ありがとうございました。

その他の回答 (3)

ba-demi
ベストアンサー率71% (5/7)

2006/11/21 12:44 回答No.4

同じ様な表示になったことがあります。（その時の場合は、今回の例でいうと「日付・カテゴリ・タイトル」の他に左側にメニューを配置していたのですが・・・・） floatをたくさん組み合わせたレイアウトでの不具合でした。 IE以外のブラウザ（Firefox、Safari、OPERA）で、「１番上のものにだけ下に余白がたくさんできる状態」になりました。その時は、（今回でいうところのdiv.rightに）widthを指定すれば直りました。本当に参考ですが・・・

質問者

お礼 2006/11/21 12:49

2カラムで作成しているので、きっとba-demiさんと同じだと思います。この箇所だけでなく、全体的にレイアウトの不具合を起こしていたんですね。ありがとうございます。早速参考にさせていただきます。

crepon133
ベストアンサー率51% (399/776)

2006/11/21 09:59 回答No.3

borderを入れてみるとどのような構造になっているか分かりやすいと思います div.left {float: left;width: 100px;border:1px solid #6666ff;} div.right {border:1px solid #ff6666; } div.end {clear: both; border-bottom: 1px dotted #000000;}

質問者

お礼 2006/11/21 12:44

教えていただcssにて構造の確認をしてみましたが、特に問題はないようでした。この状態にしたままで、他の可能性も考えてみようと思います。ご回答ありがとうございました。

crepon133
ベストアンサー率51% (399/776)

2006/11/20 20:13 回答No.1

<div class="item"> <div class="main"> タイトル </div> <div class="side"> 日付<br> カテゴリ </div> <br class="clear"> </div> <div class="item"> <div class="main"> タイトル </div> <div class="side"> 日付<br> カテゴリ </div> <br class="clear"> </div>

質問者

お礼 2006/11/21 12:33

早速試してみましたが、同じ症状になってしまいました。ご回答ありがとうございました。

関連するQ&A

コーディングで「float」のclearの仕方
htmlとcssのコーディングに関して質問させてください。右側と左側にボックスをフロートさせた際、どうやって回り込みを解除したらよいのか教えてください。 ▼htmlのタグ <div id="left">......</div> <div id="right">......</div> ▼cssのタグ #left{float:left; width:100px;} #right{float:right; width:100px;} このようなコーディングをした際には、 html、もしくはcssのどちらに、どのようなタグを追加して回り込みをなくしたらよろしいでしょうか？分かりにくいかもしれませんがご教授いただければ幸いです。
- 締切済み
- その他([技術者向] コンピューター)
floatタグの使い方
FOM出版　WEBクリエイター検定　初級のテキスト問題で分からないことがあります。詳しいかたお力をおかしください。 htmlファイルの記述ーーー（少し簡略化してます） <!DOCUTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="left"> <p>古代の七不思議</p> </div> <div class="right"> <p>古代の七不思議</p> </div> </body> </html> CSSの記述ーーー .left{color:#000000; background-color:#cccc99; padding:10px; margin-left:10px; width:300px; float:left; } .right{color:#000000; background-color:#cccc99; padding:10px; margin-left:350px; width:300px; } これが正解のようで、クラスleftの右にクラスrightが回り込みます。しかし僕にはクラスrightに記述したmargin-left:350px;がよく分かりません。 divタグでボックスを二つ創ってあるので、.leftにfloat:left;の記述をして .rightが回り込んで.rightにmargin-left:10px;記述とかで隙間が開くのだと思っていました。ちなみに.rightのmargin-left:350px;を10pxにして.rightにもfloat:left;とかけるとうまく回り込みます。これもよくわかりません。つたない文章で分かりづらいかもしれませんが、どうか解説をお願いいたします。よろしくお願いします。
- ベストアンサー
- HTML
IEとその他のブラウザの表示
よろしくお願いします現在、2段落の段組をCSSで行っています但し、1段落目と2段落目にはマージンを指定していますそこで質問なのですがどこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？よろしくお願いします
- ベストアンサー
- 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
【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？それとも、自分の記述がおかしいのでしょうか？例えば下記の例です。こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }
- 締切済み
- 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
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によるレイアウト
box_mを縦に並べて、box_mの中にbox_1（左）とbox_2（右）を作りました。 CSS .box_m { width: 410px; margin: 0px 0px 20px 0px; } .box_1 { float: left; width: 200px; height: 100px; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; } HTML <div class="box_m"> 　<div class="box_1"> 　ボックス１　</div> 　<div class="box_2"> 　ボックス２　</div> </div> <div class="box_m"> 　<div class="box_1"> 　ボックス１　</div> 　<div class="box_2"> 　ボックス２　</div> </div> IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。 box_m同士の間に20pxの空間を作るにはどうしたらいいですか？
- ベストアンサー
- CSS
CSSにてfloat:leftを使用して画像を3つ並べたのですが。。
CSSにてfloat:leftを使用して画像を3つ並べたのですがこの3つの画像をセンターによせることができません。なんでかまったくわかりません（ToT）教えてくださいｍ（＿＿）ｍ【HTML】 <div class="box2"><img src="images/sum2.gif"></div> <div class="box3"><img src="images/sum3.gif"></div> <div class="box4"><img src="images/sum4.gif"></div> 【CSS】 .box2{ float:left; width:219px; } .box3{ float:left ; width:156px;} .box4{ float:left ; width:195px; }
- 締切済み
- その他([技術者向] コンピューター)
float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css">  </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML

floatを使った時のブラウザでの違い