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

哟应该在主容器中使用宽度：自动并删除浮动：右。

这应该是你的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

在我看来，您可以摆脱主 div 上的float:rightandwidth:100%并实现您想要的。

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

Answer 3

我已经使用了这个解决方案：

#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 4

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