html - css - 両方をクリアした後の大きなギャップ

Question

divに問題がありました..

HTML

<div id="site-menu">menu1
    <br>menu2
    <br>menu3
    <br>menu4
    <br>menu5
    <br>menu6
    <br>
</div>
<div id="site-content">
    <div class="site-content">
        <div id="site-content-left">left</div>
        <div id="site-content-right">right</div>
        <div class="clear"></div>
    </div>
</div>

CSS

.site-content {
    background:pink;
}
#site-content {
    background:red;
    margin-left:250px;
}
#site-content-left {
    background:orange;
    float:left;
}
#site-content-right {
    margin:5px 0 5px 0;
    background:blue;
}
#site-menu {
    float:left;
    width: 250px;
    padding: 20px 0;
    overflow:hidden;
    background:grey;
}
.clear {
    clear:both
}

両方クリア後ギャップあり。ギャップはメニュー div の高さとして大きいです (メニュー div には何かがあります)。解決策はありますか?

jsFiddle.