clearfix の後marginが効かない
はじめました。web制作初心者です。
ご教授お願い致します。
グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。
すると次の<div>以降のmargin-topが効きません！！
今のブラウザはIEです。
<div id="wrapper">
<div id="navi">
<ul>
<li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li>
<li class="drink"><a href="" title="ドリンク">ドリンク</a></li>
</ul>
</div>
</div>
<!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ -->
<!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ -->
<div id="contents" class="clearfix">
<div id="left">
<div id="kodawari">
<img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" />
</div>
</div>
</div>
</div>
#wrapper {
width: 900px;
}
#navi ul,
#navi ul li{
float: left;
}
/* afterに対応したブラウザ向け */
#contents .clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility:
hidden;
}
/* IE6 */
* htm .clearfix {
height: 1%;
}
/* IE7 */*:first-child+html .clearfix {
height: 1%;
}
#contents {
width: 900px;
padding-top: 5px;
padding-right: 13px;
padding-left: 12px;
}
#contents #left {
width: 660px;
margin-top: 15px; ←これが効かない
}
ごめんなさい。このCSSでわかりますでしょうか？
よろしくお願い申し上げます。
お礼
回答ありがとうございました。 「html上では定義してないのに」というのは <div id="clearfix:after"> </div> とHTMLで定義しないとcssで定義しても繁栄されないのではないかという意味です。 clearfixとはレイアウトが崩れないようにするという為に使うものでいいのですよね？ 教えて頂いてどうも有難うございました。