下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] 左メニュー中央メイン右メニューが、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。どうぞよろしくおねがいいたします。

3カラムレイアウトで隙間

解決済

質問者：mirrord
質問日時：2006/01/16 18:25
回答数：2件

下記のように３カラムレイアウトを作っています

[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件)

No.2ベストアンサー

回答者： koutarou504
回答日時：2006/01/16 20:25

#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">
で異なりますが・・・。
という事で推測すれるのですが、出来るだけ再現しているソースをコピーして提示される様にお勧めします。
実際、例示されているソースではインデントとしてか全角スペースが入っています。原因としてそれを疑う必要も出てくるので・・・。（今回は逆に例示に記述ミスが明確にあったので、詳細の部分を無視させていただきましたが。）

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。確かにそれでできました。
すべてFloat:leftを設定するのですね。。

実際のソースはその他の記述や入れ子が多く余分かと思ったので見やすいように情報を削って書きましたが、余計だったようですね（綴りは実際は間違ってません。全角もありません）。参考になりました。ありがとうございました。

通報する

お礼日時：2006/01/16 20:57

No.1

回答者： partita
回答日時：2006/01/16 19:08

<div id="wrapper">

　　<div id="left">左メニュー</div>
　　<div id="center">中央メイン</div>
</div>
<div id="right">右メニュー</div>

考えてみました。
・上記タグのどこかにスペースが隠れている。
・left、center、rightの中身に問題がある
・padding設定をしたらどうなる？
・他のブラウザでの動作確認はしましたか？