floatしたときの隙間を失くしたいです

[新着] Webテンプレートを仮オープンしました

0   名前： okko ： 2007/01/24（水） 16:35  ［URL］  ID:h10fXoUf sub-t1
URL参考で、

<div id="outline">   /* width:720px; */
<div id="head">ヘッダ</div>   /* width:720px; */
<div id="right">右内容</div>   /* width:540px;float:right; */
<div id="left">左メニュー</div>   /* width:180px;float:right; */
<div id="foot">フッタ</div>   /* width:720px;clear:both; */
</div>


といった感じにしました。
すると、rightとoutlineの間に3pxの隙間ができ、
おさまりきらなくなったleftがrightのしたに配置され、
rightとoutlineの間に2pxの隙間ができました

これをなくしてピッシリrightとleftを横に並べたいので、
marginなどで調整を試みたのですが、
IEでうまく表示されるとFireFoxでうまく表示されず、
また逆もそうで…。

どうすれば、隙間をなくすことができますか？
1   名前： くいん ： 2007/01/24（水） 16:35  ID:rbRHv8MX sub-Ds
提示されたソースだけでは、同じ現象を確認できないかと思うのですが…
出来るなら、コピー＆ペーストでokkoさんの仰る問題点が再現できるソースが望ましいかと。

何故かはこちらを参照下さい↓
http://www.tagindex.com/bbs/advice.html#h203

マージンやボーダー、その他色々な設定が絡んでいる場合もありますので。
2   名前： okko ： 2007/01/24（水） 16:35  ID:h10fXoUf sub-t1
提示…ですか、わかりました


レイアウト部分CSS抜粋です
#MainBlock {
width:720px;
margin-left:50px;
text-align: left;
border-left:solid 1px #8b4513;
border-right:solid 1px #8b4513;
background-image:url('Back_1.JPG');
background-repeat:repeat-y;
}
#TopBlock {
width:720px;
height: 200px;
text-align: left;
width:720px;
height: 85px;
background-color:#7f2d00;
}
#FootBlock {
width:720px;
height: 50px;
text-align: left;
clear:both;
background-color:#7f2d00;
}
#LeftBlock {
width: 180px;
float:right;
text-align: left;
}
#RightBlock {
width: 540px;
float:right;
text-align: left;
}


レイアウト部分HTML抜粋です
<div id="MainBlock">
<div id="TopBlock">タイトルなど</div>
<div id="RightBlock">内容</div>
<div id="LeftBlock">メニューなど</div>
<div id="FootBlock">
</div>


となっています。
3   名前： okko ： 2007/01/24（水） 16:35  ID:h10fXoUf sub-t1
すみません、HTMLにミスがありました。


<div id="MainBlock">
<div id="TopBlock">タイトルなど</div>
<div id="RightBlock">内容</div>
<div id="LeftBlock">メニューなど</div>
<div id="FootBlock">コピーライトなど</div>
</div>

4   名前： くいん ： 2007/01/24（水） 16:35  ID:rbRHv8MX sub-Ds
早速見てました。
試してみたところDOCTYPE宣言が関係しているのではないかと思います。

↓このような宣言は使用されていますか？
こちらの記述を提示されたソースに適用すると問題は解決しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


DOCTYPE宣言についてはこちら。
http://www.tagindex.com/html_tag/page/doctype.html
5   名前： 匿名 ： 2007/01/24（水） 16:35  ID:EHLsnZ8D sub-Cl
UAのボックスモデルの解釈の違いについて、調べてみてはどうでしょう。CSSハックも　たくさんありますし。widthのcontent部分の解釈がUAによって異なるためです。
6   名前： K+S ： 2007/01/24（水） 16:35  ID:nROqylMa sub-YS
http://www.tagindex.com/bbs/advice.html#h203
> ソースの提示は、部分的な問題であればその部分、または周辺までのソースを。レイアウトのような全体的な問題であれば、ページ全体のソースを提示してください。

表示結果に関わるもの全てが検証材料になります。
何が表示結果に関わる、関わらないが判断できない場合は全て提示してください。

* DTDに関する情報がありません


http://www.tagindex.com/bbs/advice.html#h201
> あいまいな伝え方だと、相手もあいまいにしか理解することができません。その結果、相手は何度も聞き返さなければならず（余計な手間）、それだけでお互いの時間を消費してしまうことになります。

理想としているレイアウトを明示してください。

720pxの#MainBlockの中に、
TopBlock、RightBlock、LeftBlock、FootBlock
があり、
[          TopBlock          ]
[  LeftBlock ][  RightBlock  ]
[          FootBlock         ]
というレイアウト。
LeftBlockは180px、RightBlockは540px

HTMLソース中では、
<div id="MainBlock">
<div id="TopBlock">タイトルなど</div>
<div id="RightBlock">内容</div>
<div id="LeftBlock">メニューなど</div>
<div id="FootBlock">コピーライトなど</div>
</div>

のように、RightBlockをLeftBlockよりも先に書いている。
floatに関しては、
#LeftBlock {
width: 180px;
float:right;
}
#RightBlock {
width: 520px;
float:right;
}

として試した。
などと示すことで的確な回答が得られるはずです。

# この文章を書いてから >>4-5 の回答がされたので、何か変に解釈される部分があるかもしれません。
7   名前： okko ： 2007/01/24（水） 16:35  ID:h10fXoUf sub-t1
>6
とても見やすいです。了解しました。

みなさんどうもありがとうございました
一覧へ戻る