HTML/CSS流体可折叠侧边栏

我正在尝试为这个网站制作一个可切换的边栏，我想要的是下面显示的内容

我希望主要内容是流动的，并适应多少空间后，它在屏幕上。有没有一种简单的方法可以做到这一点，而无需使用twitter引导等框架。。。。 所以我要问的是，有没有人知道如何在没有任何框架的情况下使边栏可折叠

这就是你要找的吗？让我知道

HTML

CSS

---

hmmm css和javascript将完成这项工作。。只需设置div并让jquery完成其余的工作

<div id="inline_container">
    <div id="toggle_menu">
        <div id="toggle">
        </div>
    </div>
    <div id="main_container">main container</div>
</div>

var toggled = true;

$("#toggle_menu").click(function(){
    if(toggled) {
        toggled=false;
    $(this).animate({width: "20px"}, "fast");
    }else {
        toggled=true;
            $(this).animate({width: "200px"}, "fast");
    }
});

* {margin: 0; padding: 0;}
.body {height: 100%; width: 100%;}
#inline_container {height: 500px; width: 100%;}
#toggle_menu {height: 100%; width: 20px; display: inline-block; float: left; background: lime;}
#main_container {height: 100%; width: 65%; display: inline-block; float: left;}
#toggle {height: 100%; width: 20px; display: inline-block; float:left; background: green;}