css-float - コンテナー div が展開されず、コンテンツが表示されないのはなぜですか?

Question

スライドアウト メニューを含むコンテナー div があります。これは、「折りたたまれた」ときにメニューが表示されないように、overflow-x: hidden が必要であることを意味します。

ただし、コンテンツに合わせて高さを広げたいです。現時点では、スクロールバーを追加するだけです。

http://jsfiddle.net/bdgriffiths/ySQgm/8/

問題は、子の「メニュー」要素のフロートに関係していると思われます。

コンテナ DIV の CSS は次のとおりです。

.container {
   font-family:Arial; Verdana; Sans-serif;
   background: #efefef;
   border: 1px solid #bbb;
   border-bottom: 6px solid magenta;
   width: 340px;
   height:auto!important;
   overflow-x:hidden;
   overflow-y:auto;
   position:relative;
}

そして、メニューは次のように構成されています。

.slideout {
   background: magenta;
   position: relative;
   width: 300px;
   height: 40px;
   top: 0px;
   right:-320px;
   z-index:2;
}

.clickme {
    float: left;
    height: 40px;
    width: 20px;
    background: magenta;
}
.slidebutton {
    color:#fff;
    height:40px;
    width:30%;
    text-align:center;
    background-color: magenta;
    float:left; 
}