- ベストアンサー
CSSで1つのボックスの中に2つのボックスを横に並べて両サイドをピッタリ表示したい
CSSをちょこっと勉強している者です。 どうしてもうまくいかないところがあるので質問させてください。 先に参考イメージを載せておきます。 http://www.geocities.jp/shinopo/sample.gif 一番外枠になる1つのボックス(Aとする)の中に2つのボックス (左をB、右をCとする)を横に並べてAの横幅一杯ぴったりに表示 されるようにしたいと思っています。(参考イメージの下を参照) 参考イメージ下のようにAのborderを無くすとBとCが横に並んで ぴったりと表示されるのですが、Aに1pxのborderを設定すると CがBの下段に表示されてしまい、Cの右側とAのborderの間に 少しの隙間ができてしまいます。(参考イメージ上参照) この隙間を無くすにはどのようにすれば良いのでしょうか? この隙間がなくなればBとCは横にぴったりと表示されると思うのすが。 自分なりにCのmargin-rightやpadding-rightに0pxなどを設定して 試してみましたがうまくいきません。 以下にコードを載せておきます。 ご教授よろしくお願い致します。 ============== index.html ============== <html> <head> <title>ホームページのタイトル</title> <link rel="stylesheet" href="./css/style.css" type="text/css"> </head> <body> <div id="centermain"> <div id="container"> <div id="banner"> <h1>見出し1</h1> </div> <div id="content"> <br> <h2>見出し2</h2> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="menu"> <br> <dl> <dt>メニュー</dt> <dd>カテゴリ1</dd> <dd>カテゴリ2</dd> <dd>カテゴリ3</dd> </dl> </div> <div id="foot"><p>Copyright (C) 2009 Test All Right Reserved.</p></div> </div> </div> </body> </html> ============== style.css ============== body{ margin:0px; } #centermain{ text-align:center; } #container{ width:780px; margin-left:auto; margin-right:auto; text-align:justify; border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; } #banner{ background-image:url(../img/sima.gif); width:780px; height:60px; } #banner h1{ margin-top:0px; margin-bottom:0px; padding-top:15px; padding-left:20px; } #content{ float:left; background-color:#cccccc; width:540px; height:100px; padding-left:20px; } #menu{ float:right; background-color:#999; width:240px; height:100px; padding-left:10px; } #foot{ clear:both; text-align:center; font-size:12px; color:#ffffff; background-color:#cccccc; width:780px; height:25px; padding-top:7px; }
- みんなの回答 (3)
- 専門家の回答
お礼
atseさん、ご返答ありがとうございます。 イメージまで付けて説明してくださり非常に助かります。 ブラウザの情報を載せるのを忘れておりました。 言われているようにIE6 SP3にて動作確認しております。 Firefoxでの表示はバラバラですね^^; 説明いただいた内容を試してから改めてご報告させていただきます。
補足
返事が遅くなり申し訳ございません。 標準準拠になるように下記のように書き加えることで、 正常に表示されることを確認しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 自分でも実際にFirefox3.5にて以前のコードで試して みましたが見事に崩れておりました^^; その表示も上記と同対応で崩れず表示されることを 確認しました。 IE6にそのようなバグがあることを初めてしりましたし、 そもそも標準準拠・後方互換モードというもの自体 初めて知りました。 そのような事をもっと勉強しようと、某サイトでオススメ していた『Web Standards Design』という本を購入して 読み始めました。 まだ読み始めて少々ですが、がんばってそれなりのHPが 作れるようにがんばりたいと思います。 ありがとうございました!