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

質問

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

XHTMソース
■http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?Stat=on&ViewSource=on&Method=URL&URL=http%3A%2F%2Flabo.fesly.net%2Ftest2%2Findex.php
CSSソース
■http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Flabo.fesly.net%2Ftest2%2Findex.php

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

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

回答No.1

grumpy_the_dwarf · ベストアンサー

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;}を指定していたのをすっかり忘れていました。
本当にありがとうございます。