- 締切済み
FirefoxでのCSSページの崩れについて（長文）
こんにちわ。Firefoxで<div>を使って段組をしているのですが、セレクトボックスを設置した瞬間、右側に配置した段組が崩れてしまいます（他のブラウザでは崩れません）。どうしても解決できず途方にくれております。何卒ご指南下さい（涙） 「RSS 表示」の段組部分が「エントリー01」セレクトボックスの段組と同列にならばず、下の段へはじき出されてしまうのです。 ----<body部分>------ <body> <div class="page"> <div class="contents"> <!-- 左側メニュー 表示 --> <div id="leftmenu"> <!-- カテゴリボックス表示 --> <form method="get" action="#"> <select name="category"> <option value="">選択してください</option> <option value="01">＊＊＊＊＊＊＊</option> <option value="02">＊＊＊＊＊＊</option> </select> <input type="submit" value="表示" /> </form> </div> <!-- 中央コンテンツ 表示 --> <div id="main"> <!-- 本文表示 --> <h2 class="title">エントリー01</h2> </div> </div> <!-- 右側メニュー 表示 --> <div id="rightmenu"> <!-- RSS 表示 --> <h3 class="calendar_title">RSS 表示</h3> </div> </div> </body> ---<使用しているCSS>----- .page { width: 800px; text-align: left; background: #ffffff; display: table; border: 1px solid #370d55; margin: 20px auto; padding: 0px 0px 0px 0px; } .contents{ width: 595px; border: 1px solid #370d55; float: left; } #main{ width: 390px; border: 1px solid #370d55; float: right; } #rightmenu{ width: 190px; border: 1px solid #370d55; float: right; } #leftmenu{ width: 190px; border: 1px solid #370d55; float: left; padding: 0px 0px 0px 10px; }
- yamatoneko
- お礼率87% (143/164)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kuronekoyarou
- ベストアンサー率54% (30/55)
ソースを示すよりひとまず基本を押さえたほうがいいと思うので… 1.floatを使うのであれば必ずfloatのclearが必要 <div class="container"> <p class="left">左側</p> <p class="right">右側</p> <br class="clear"> </div> というソースがあったとして .container {width:500px;} p.left {float:left; width:250px;} p.right{float:right; width:250px;} と指定した場合 .clear {clear:both;} とするのが一番シンプルなやり方です。 もうちょっとスマートな方法もあるのでfloatの基本が分かったらやり方を探してみてください。 2.widthを指定した要素に同時にpaddingやborderを指定しない。 IEではwidth＋padding＋borderの幅を「width」として扱う場合がある（条件による）。なのでCSSのハックを使うかdivを1つ増やして指定を分ける(私はこちらをおすすめします） 以上を踏まえればそんなにバグらないと思います。 あとdisplay:table;の指定も意図が分かりませんが、いらないと思います。
お礼
ご回答有難うございます。 仕事先からHTMLとCSSを渡され、構成をかえずにマルチブラウザ対応させてくれといわれておりましたが（タグはそこから抜粋）、このままではいけないなということが良くわかりました。 依頼先に相談してイチから作り直しさせてもらうことになりました。それでも勉強不足だったので、非常に苦労してしまいましたが、無事作り直しが終わりました。 「display:table;」は良くわからなかったので、はずさずそのままにしていたのですが、不要なんですね。 ありがとうございました。