ナビゲーションバーのfloatを解除できない。

質問

以上二つのソース(HTMLと,CSS)を用意しました。

top_naviのfloatを解除して
その下に、画像の表示をさせたいのですが、(添付画像、ピンクエリア)

top_naviの続きに、【div class="slideshow"】の画像表示エリアが表示されてしまいます。
(添付画像　水色のエリア。)

【<!--<div class="clearboth"></div>-->
を使用すれば、思い通りに表示されるのですが、
clearfixの方法で解除したいと思っております。】
また、IE6～9、firefox10～11で動作させたいと思っております。

ご教授お願いします。

==HTMLソース===
<div id="container">
<div id="top_navi">
<ul>
<li>リンク1</li>
<li>リンク2</li>
<li>リンク3</li>
</ul>
</div>
<!--<div class="clearboth"></div>-->
<div id="show" class="slideshow" align="center">
<img src="photos/1.jpg" alt="画像の説明" width="960" height="300" border="0">
</div>
</div>
==HTMLソースここまで===

##CSSソース##
*{
padding : 0px ;
margin : 0px ;
}

#container{
width : 960px;
border: 3px solid #FF9900;
margin : 5px auto;
}

//navi設定部分ここから
#top_navi {
height: 1.3em;
background-color: #3399FF;
}
#top_navi ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#top_navi li {
float: left;
width: 100px;
height: 1em;
text-align: center;
padding: 0px;
margin: 0px;
}
#top_navi li a {
color: #0000FF;
display: block;
}
#top_navi li a:hover {
color: #FFFFFF;
background-color: #000080;
height: 1.3em;
}
//navi設定部分ここまで

//naviとslideshowの間をclearfixする。
.clearfix:after {
content: "."; /* 新しい要素を作る */
display: block; /* ブロックレベル要素に */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix {
min-height: 1px;
}

* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}

.clearboth{
clear: both;
}

##CSSソースここまで(一部抜粋)

回答No.3

DrFell · ベストアンサー

ごめん。1行目間違えた。

誤：cssソース側の.clearbothを「.top_navi」にすべて変える。でOK
正：cssソース側の.clearfixを「.top_navi」にすべて変える。でOK

お礼

情報ありがとうございます。

なんとかできました。
ソースの提示大変助かりました。

また、
align="center"
ですが、参考にしていたjavascriptのソースをそのままとってきたので
気づきませんでした。

ありがとうございました。

回答No.2

DrFell

cssソース側の.clearbothを「.top_navi」にすべて変える。でOK

あるいは
<!--<div class="clearboth"></div>-->
<div id="show" class="slideshow" align="center">
こんなことしないで、
<div id="show" class="slideshow clearboth" align="center">
でもOK

または
#show
.slideshow
のどちらかにclear:left;を入れてもOK

いずれにせよ<div class="clearboth"></div>こんなものは必要ない。

ついでに、align="center"は非推奨。なぜｃｓｓにしないか謎。

回答No.1

yukiponta

clearfixというのはfloatをかけている要素の親にかけるものなので、
ulにclearfixをかければfloat解除出来ると思いますよ。

補足

情報ありがとうございます。
早速ULに試してみましたが、

IEでは表示されるのですが
Firefoxでは、レイアウトが解除されませんでした・・・。