divを新しい行に配置する（フローティング<ul>要素が原因の問題）

Question

したがって、次のような3つの順序付けられていないリストがあります。

  <ul class="menu">
<li class="heading">Title (Click To Download)</li>
<li><a title="Download sample.mp3" href="http://example.com/sample.mp3">Sample Song</a></li>
</ul>

次のCSSスタイル：

/* SITE MAP MENUS */

ul.menu {

    float: left;
    margin: 0 10px 0 10px;
    display: block;
    font-size: 13px;
    line-height: 24px;
    color: #898989;
}


ul.menu li {}

.menuText
{

}
li.heading {
    color: #493f0b;
    font-weight: bold;
    border-bottom: 1px solid #d7d7d7;
}

ただし、新しいdivを配置すると：

<div class="pleasedontfloat">The paganation would go here..</div>

リストの下に行く代わりに、それらの隣に行きます。どうすれば修正できますか？ （クラスpleasedontfloatにはルールが適用されていません）

Answer 1

.pleasedontfloat { 
    clear:both;
}