- ベストアンサー
IEとその他のブラウザでの表示について
- IEとその他のブラウザでの表示に違いがあるため、調整方法を教えてください。
- CSSで2段落の段組を行っていますが、Firefoxやその他のブラウザではマージンの箇所が意図した表示にならない問題があります。
- 同じ表示にするためには、floatとmarginの指定方法を見直す必要があります。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- crepon133
- ベストアンサー率51% (399/776)
＞実際には3段あって 左：300px、中：10px（マージン）、右：300px これで3段っていうことでしょうか？ だとしたら、マージンをとるためのだけの段は不要だと思います 前回のものは2段組で間に10pxの空きがでるようにしています ご参考：3段組 #content { width: 620px; margin: 0px; padding: 0px; } div.box_left_outer{ width: 200px; background-color: #FFF9E5; float: left; } div.box_left{ width: 200px; padding: 20px; } div.box_center_outer{ width: 200px; background-color: #FFF9E5; float: left; margin:0px 10px; } div.box_center{ width: 200px; padding: 20px; } div.box_right_outer{ width: 200px; background-color: #FFF9E5; float: left; } div.box_right{ width: 200px; padding: 20px; } .clear-b { clear: both; } <div id="content"> <div class="box_left_outer"> <div class="box_left">テキスト</div> </div> <div class="box_center_outer"> <div class="box_center">テキスト</div> </div> <div class="box_right_outer"> <div class="box_right">テキスト</div> </div> <br class="clear-b"><!-- 回り込み解除 --> </div>
補足
回答ありがとうございます 3段組 とても参考になりました paddingで指定すればよかったのですね ただ、paddingで指定した場合何故かIEは padding幅が外側？について背景が出なくなってしまいました crepon133さんのソースでみるとそんなことはないので 自分の書き方が間違っていると思いますが あと、centerブロックの右側にpadding: 20px; と指定しているにもかかわらず30pxぐらいの幅があいています これも自分の書き方だと思うのですが floatと左右マージンは一緒に指定しても問題ないんですよね？
- crepon133
- ベストアンサー率51% (399/776)
幅610pxのボックスの中に box_left_outer を左に配置 box_right_outer を右に配置 この方がすっきりするのではないでしょうか #content { width: 610px; margin: 0px; padding: 0px; } 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: 300px; background-color: #FFF9E5; float: right; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } .clear-b { clear: both; } <div id="content"> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right"> テキスト </div> </div> <br class="clear-b"><!-- 回り込み解除 --> </div>
補足
質問の仕方が悪かったようです すいません 実際には3段あって 大きいくくりの中に3段作って その段と段の間に10pxのマージンを設定し、背景色を指定して その背景色が指定してあるところにテキストを書いていきたいのですが そのテキストは上下左右に20pxのマージンが入るようにしたいのです 以上なのですが説明が間違っていてすいません よろしくお願いします
お礼
ありがとうございました 無事解決しました○┓ペコ floatと左右マージンは一緒に指定したときに 余計な空白が入ったり入らなかったりしますね(;´д｀) もう、よくわかりませんヽ(´ー｀)ノ