CSS floatによるレイアウトの問題解決法
- CSS floatを使用してbox_m内にbox_1とbox_2を並べたが、Firefoxでmarginが反映されずにbox_mがくっついてしまう問題が発生。
- IEでは問題なく表示されるが、Firefoxではbox_m同士がくっついてしまう。
- box_m同士の間に20pxの空間を作るためにはどうすれば良いか？
- ベストアンサー
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
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>テスト</title> </head> <body> <style type="text/css"> .box_m { width: 410px; margin: 0px 0px 20px 0px; background-color:red; overflow:hidden; } .box_1 { float: left; width: 200px; height: 100px; background-color:green; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; background-color:blue; } </style> <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> </body> </html>
関連するQ&A
- 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
- 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を使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- 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
- IE6とIE7でfloatレイアウトのずれ対処法
質問させていただきます。 当方制作のWEBサイトのレイアウトの一部が IE6と7のみで崩れてしまいます。 画像のように、正しくはbox1とbox2を横並びに配置したいのですが、 IE6と7のみbox1の下にbox2がきてしまいます。 FirefoxやOpera.Safariでは崩れません。 具体的な内容は下記です。 画像のような配置で、box1.box2.box3が配置されています。 現在box1.box2.box3のCSSは下記です。 .box1 {float:left; width:60%; height:112px; } .box2{ color:#333; float:none; width:39%; height:108px; overflow:auto; margin:5px; border:2px dotted #6ebef2; background-color:#FFF; padding:0px; font-size: 9pt; } box3 { width : 100% ; height : 20px ; background-color:white; text-align: right; margin-top: 10px; margin-bottom: 10px;} html上では以下のように記述しています。 <div class="box1"> 本文 </div> <div class="box2"> 本文 </div> <div id="box3"> 本文 </div> 何分独学で制作しておりますので、 ここのところで非常につまづいております。 ３時間考えてもできませんでした....。 もし対処法をご存知でしたら、 教えていただけますと大変助かります。 よろしくお願い致しますm(_ _)m
- ベストアンサー
- CSS
- 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でボックスを横並びにし、横幅指定してもくっついてしまう。
こんにちわ！ 只今CSS課題に取り組んでいるのですが、 フロートを使用し、写真（A）、テキスト（B）、写真（C）、テキスト（D）、と並べたいのですが、（B）に横幅指定しているにもかかわらず、（C）がＩＥではＯＫなのですが、FIREFOXではぴたっとくっついてしまいます。 【html】 <div class="box"> <div class="photo"><img src="img/photo_01.jpg" width="132" height="85"></div> <div class="txt">第23回こまったな<br>どうしたのかな賞<br>受賞</div></div> <div class="box"> <div class="photo"><img src="img/photo_02.jpg" width="132" height="85"></div> <div class="txt">第23回どなたかー<br>助けてください賞<br>受賞</div></div> </div> .box{ width : 258 px; margin: 0px; float:left; } .photo{ width : 132 px; margin: 0px; float:left; } .txt{ width : 123 px; color: #555555; font-size: 12px; text-align: left; margin: 0px 0px 0px 3px; padding: 0px ; line-height:18px; float:left; } となっております。 何故、ＩＥでは大丈夫でFirefoxでは内容によって横幅が変わってしまうのでしょうか？ ご教授願いませんでしょうか～？ 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでのレイアウト（Firefox向け）
下のようなレイアウトをCSSで行いたいと思っています。しかし意図するような表示にFireFoxではなりません。FireFoxではどのようにすれば上手くいきますでしょうか？（上手くアスキーアートが書ければいいのですが、、、センタリングされたBOXの中で、さらにBOXが2つ並ぶというようなものです。） ┌──────────────┐ ｜┌─────┐┌─────┐│ ｜｜TEXT ｜｜TEXT ｜｜ ｜｜ ｜｜ ｜｜ ｜└─────┘└─────┘│ └──────────────┘ <html> <head> <style type="text/css"> body { margin: 10; text-align: center; } #canpas { border-style:solid; width: 700px; } #box { margin: 10; border-style:solid; width: 300px; float: left; } </style> </head> <body> <div id="canpas"> <div id="box">testtesttest</div> <div id="box">testtesttest</div> </div> </body> </html> ぜひよろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳでテーブルを作る方法について
CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。２つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- 回り込みfloatの間隔について質問です
ボックスでボックスを回り込みしています。(?) …書いたほうが早いですね… HTMLが <div id="left"> 左ボックス </div> <div id="right"> 右ボックス </div> CSSが *{ margin: 0px; padding: 0px; } #left { float: left; width: 100px; height: 100px; } #right{ width: 200px; height: 100px; } といった感じです。 左ボックスと右ボックスの間に1～2pxほどの間隔があいてしまいます。 これをなくすにはどうすればいいですか？ お願いします。
- 締切済み
- その他（インターネット・Webサービス）
お礼
回答ありがとうございます。 きちんと表示できました。