css - 右フロート幅 100% が機能しない

Question

ここに私のフィドルがあります: http://jsfiddle.net/kasper90/GB7bs/6/ メイン div をできるだけ大きくして、トグル div のすぐ近くに配置します。これどうやってするの ？どんな助けでも本当に感謝しています:)

HTML:

<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide",{ direction: "left" }, 1000 );
});
</script>
<div id="main"><object data="http://euclidthegame.com/mathexchange/5.svg" type="image/svg+xml"></object></div>

CSS:

 #toggle {
    float: left;
    width: 100px;
    height: 800px;
    border: 1px solid black;
    background: #ccc;
}
#main {
    float: right ;
    width: 100%;
    height:800px;
    border: 1px solid black;
}

Answer 1

メイン コンテナで width:auto を使用し、floating:right を削除する必要があります。

これはあなたのcssである必要があります：

#toggle {
    float: left;
    width: 100px;
    height: 800px;
    border: 1px solid black;
    background: #ccc;
}
#main {
    height:800px;
    border: 1px solid black;
    width: auto;
}

よろしく

Answer 2

私はこのソリューションを使用しました：

#main {
    position: absolute;
    height:800px;
    border: 1px solid black;
    width: 100%;
    z-index: 1;
}

#toggle {
    position:absolute;
    width: 200px;
    height: 800px;
    border: 1px solid black;
    background: #ccc;
    z-index:2;
}

Answer 3

メイン divのfloat:rightandwidth:100%を削除して、目的を達成できるように思えます。

http://jsfiddle.net/GB7bs/4/

Answer 4

#toggle {width:10%;}
#main {width:89%;}