cssのclear:both;を利用した場合の余白が・・・

いまXHTML+CSSでサイトを作っています。
CSSで「clear:both;」を使うとFirefoxでは上にIEでは下に余分な余白が出来てしまいす。
また「clear:both;」を使わないとカラム落ちをしてしまいます。

XHTMソース
■http://openlab.ring.gr.jp/k16/htmllint/htmllint. …
CSSソース
■http://jigsaw.w3.org/css-validator/validator?pro …

「clear:both;」はXHTMLソースの44行目のdivです。
44行目のdivを入れないとカラム落ちしてしまい、入れると余分な余白ができてしまいす。

回避方法や間違っている場合はご指摘をお願いします。
ご指導のほど宜しくお願いします。

No.1 ベストアンサー 回答者： grumpy_the_dwarf 回答日時： 2008/06/15 09:43

Firefoxで見ましたが、#topmenu-imgの上に余白があるんじゃなく

て、#headerの下に#sitelogoのマージンがはみ出しています。CSS
の P {margin : 0 0 1em 0;}の部分ですね。これは#sitelogoのス
タイルで書いてやればオッケー。

で、美しくないDIV#clearですが、上記で一応「これがなくても
#sitemenuが#sitelogoに引っかからず#containerの左端まで戻る」
状態になるので削除できます。でも、理屈からいえばこれは元々、
#sitemenuのスタイルにclear:both;を追加しとけばよかったんじゃ
ないですかね。

この回答へのお礼

ご回答有難うございます。

P {margin : 0 0 1em 0;}を指定していたのをすっかり忘れていました。
本当にありがとうございます。

お礼日時：2008/06/15 11:28