Html 三列流体宽度，可使用或不使用侧栏

我有可以在特定页面上打开和关闭的边栏，但我正在尝试设计一个CSS布局，无论启用了什么边栏，它都会填满可用空间。到目前为止，我有：

CSS:

​ HTML:

内容内容
边栏
边栏

JSIDLE链接：

---

问题是右栏与主内容栏重叠。但是，我仍然希望将中间列保持为100%，以便在禁用其中一个侧栏时，它会填满所有空间。

添加一个包含主要内容的容器，并对其应用

溢出：隐藏
，以便对其应用新内容。您需要稍微重新排列元素。见下文：

HTML


边栏
边栏
内容物内容物内容物内容物

​CSS

#容器{
宽度：100%；
}
#左侧边栏，#右侧边栏，#内容{
高度：50px；
}
#右侧边栏{
背景：灰色；
宽度：50px；
浮动：对；
}
#左侧边栏{
背景：黄色；
宽度：50px；
浮动：左；
}
#内容{
背景：橙色；
高度：自动；
}
#科梅因{
溢出：隐藏；
}

​

下面是一个JSFIDLE，用列演示：

没有：
这是一个很好的答案，谢谢。但是，当您缩小它时，内容会显示在彩色框的下方。有没有办法解决这个问题？我尝试将
height:auto
添加到
#content
中，这似乎很有帮助。见：
#container{
    width: 100%;
}
#sidebar-left, #sidebar-right, #content{
    height: 50px;

}
#sidebar-right{
    background: gray;
    width: 50px;
    float: right;
}

#sidebar-left{
    background: yellow;
    width: 50px;
    float: left;
}

#content{
    background: orange;
}

<div id="container">
    <div id="content">content content content content content content content
        <div id="sidebar-left">sidebar</div>
        <div id="sidebar-right">sidebar</div>
    </div>
</div>