css - 为内容创建动态增长的宽度

Question

您好，我知道有很多关于内容的动态宽度的问题。但是这个具体问题我找不到好的答案。

我的网站(一些页面)有以下设置

         +--------------+---------------------------------+
     |              |                                 |
     |  Sidebar     |       Content                   |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     |              |                                 |
     +--------------+---------------------------------+

总宽度为980px

但是在其中一些页面上我没有使用侧边栏，所以左侧有空白区域..当没有侧边栏时，如何让内容页面向左流动来解决这个问题？

     +--------------+---------------------------------+
     |                                                |
     |                      Content                   |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     |                                                |
     +--------------+---------------------------------+

我有如下的html结构

我给 aside 和 content div 都设置了固定宽度，aside 左边有一个 float ，内容右边有一个 float 。

有什么简单的方法可以做到这一点吗？

Answer 1

HTML

<div id="main">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

CSS

#main{
    width: 980px;
    margin: 0 auto;
}
#main:after{
    content: '';
    display: block;
    clear: both;
}
#sidebar{
    float: left;
    width: 200px;
}
#content{overflow: hidden;}