IE6にてずれる

質問

こんにちは
html超初心者です。

headとcontentsを隙間なく表示したいのですが、IEではコンテンツがずれてしまい
うまく表示されません。

コードを記載します。
==================================
--------html------------

<div id="all">
<div id="head">
<h1><a href="../index.html"><img src="img/logo.gif"></a></h1>

<div id="guide">
<a href="../index.html">ホーム</a>
<a href="index.html">プロフィール</a>
<a href="#">リンク</a></div>
<p class="clear-both">&nbsp;</p>
</div>

<div id="contents">
コンテンツ内容
</div>
</div>

--------css------------

body,a,div,p,h1,h2,h3,ul,li,img,dl,dd,dt,ol{
margin:0;
padding:0;
text-decoration: none;
}
#all{
width:650px;
}
.clear-both{
font-size:0;
height:0px;
clear:both;
line-height:0%;
}
#head{
width:650px;
background:url('../img/main_img.gif') no-repeat;
height:90px;
}
#guide{
float:right;
margin:60px 0px 0px 0px;
}
#contents{
background:url('../../common/img/back_img.gif') repeat-y ;
}

==================================

headにてボックスを二つ挿入し、それらをそれぞれfloat：left・rightで左右に表示しています。
その下に<p class="clear-both">&nbsp;</p>
を挿入し、cssにてそのクラスに対し、
clear:both; line-height:0%;
等を入力しています。

IEにて確認すると、その下のコンテンツが
右にずれてしまっています。
line-height:0%;がcssに記載されていなければ
ずれずに表示されますが、headとcontentsの間に
隙間ができてしまいます。
line-height:0%を記載していてもfirefox・operaではcontentsはずれず、隙間もありません。

どなたか教えてください。
よろしくお願いします。

回答No.2

aqucent · ベストアンサー

とりあえず、<p class="clear-both">&nbsp;</p> は不要です。
恐らく、<div id="guide"> の回り込み解除のためのタグ(CSS)だと思われますが、
親要素に <div id="head"> があるので、回り込みを解除する必要はありません。
回り込みはブロックレベル要素の中で完結します。

> IEにて確認すると、その下のコンテンツが右にずれてしまっています。
<div id="head"> で括られているのですから、当然でしょう。
というより、括られていない動作をお望みなのでしょうか。

<div id="all">
<div id="head">
<h1><a href="../index.html"><img src="img/logo.gif"></a></h1>
</div>

<div id="guide">
<a href="../index.html">ホーム</a>
<a href="index.html">プロフィール</a>
<a href="#">リンク</a>
</div>
<br style='display: none; clear: both'>

<div id="contents">
コンテンツ内容
</div>
</div>

"clear-both" については、#1 の方と同様、空要素を使うことをお勧めします。
p要素や「空白」で余白を取る形はお勧めできませんので…。(margin, padding辺りで余白を取るのが一般的です)
質問者さんのやりたいことを考えると、CSSは "display: none" が適切だと思います。

個人的には、"float: right" より、"float: left" の方をお勧めします。
例文では、「コンテンツ内容」は1つですが、その下にもう一つ「コンテンツ内容」を続けると、
後で、htmlソースを見たときに順番が把握しづらくなります。

<div id="body">
<div style="float: left; margin-right: 5em">
コンテンツ内容1
</div>
<div>
<a href="../index.html">ホーム</a>
<a href="index.html">プロフィール</a>
<a href="#">リンク</a>
</div>
</div>

<div id="contents">
コンテンツ内容2
</div>

初めに説明しましたが、予めブロックレベル要素で括っておけば、"clear: both" が不要となります。

参考URL：

http://www.nextindex.net/web/CSS/formatting.html#display

お礼

<p class="clear-both">&nbsp;</p> 消したらできました！
回り込みはブロックレベル要素の中で完結するんですね！
どんなときも回り込みをした時はclear-bothがないとくずれると信じて疑っていませんでした！
ご丁寧なご回答本当にありがとうございましたm(__)m

回答No.1

mognol_n

私が使っている方法ですが…

1．CSSの.clear-bothを
.clear-both{
clear:both;
}
だけにする

2．<p class="clear-both">&nbsp;</p>を、
<br class="clear-both">に置き換える

以上で直らないでしょうか？

お礼

早速のご回答ありがとうございます。
<br class="clear-both">に置き換えることでできました！
しかし今回は#2の方のご回答で<p class="clear-both">&nbsp;</p>を消してやることにしました。

これからはmognol_nさんの言うとおり、clear-bothをつける時は、brタグにつけたいと思います。

ご回答本当に、ありがとうございました。m(__)m