- ベストアンサー
3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#center { float:left; width:450px; margin:0px;} #right { float:left; width:120px; margin:0px; } とりあえずこの様にすれば対応できました。 （ｗｉｎｄｏｗｓｘｐ ＩＥ６で <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> での検証。） 理由は不明というか、div を p とか別の要素にしてみた時は隙間が出来ませんでした・・・。 という事でＩＥのバグではないかと思いますが 作り手としては対応法が判ればいいかなと思い、その先の原因確認の検証はしていません。 蛇足ですが、例示では #wraper { float:left; } と <div id="wrapper"> で異なりますが・・・。 という事で推測すれるのですが、出来るだけ再現しているソースをコピーして提示される様にお勧めします。 実際、例示されているソースではインデントとしてか全角スペースが入っています。原因としてそれを疑う必要も出てくるので・・・。（今回は逆に例示に記述ミスが明確にあったので、詳細の部分を無視させていただきましたが。）
その他の回答 (1)
- partita
- ベストアンサー率29% (125/427)
<div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> 考えてみました。 ・上記タグのどこかにスペースが隠れている。 ・left、center、rightの中身に問題がある ・padding設定をしたらどうなる？ ・他のブラウザでの動作確認はしましたか？
お礼
上の方法で解決できました。お答えありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございました。確かにそれでできました。 すべてFloat:leftを設定するのですね。。 実際のソースはその他の記述や入れ子が多く余分かと思ったので見やすいように情報を削って書きましたが、余計だったようですね（綴りは実際は間違ってません。全角もありません）。参考になりました。ありがとうございました。