Css 为内容创建动态增长宽度

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

我的网站有以下设置（一些页面）

总宽度为980px

但是在这些页面中，我没有使用侧边栏，所以左侧有空白。。在没有侧边栏的情况下，如何让内容页向左流动来解决这个问题

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

我有以下html结构

我给了旁白和内容div一个固定的宽度，旁白有一个左浮动，内容有一个右浮动

有没有一种简单易行的方法来实现这一点？

HTML

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

这里有一个显示了两种情况：一个有侧边栏，另一个没有侧边栏

需要记住的一点是，

display:block

属性使元素具有所有可用宽度，而不考虑内容。这就是

.content

的作用-

float:left

使其显示在侧边栏（如果存在）的右侧，并填充所有可用空间

HTML

---

不工作。。内容向左移动，侧边栏在iTunes下，但不知怎的，它不起作用。。如果我只做一个结构测试设置，它可以工作，但当在我的网站上实现时，它不工作。一切都可以修复，这个布局相当简单，并不复杂。试着给我们一个不工作的布局示例，我们会尝试修复它。但是这个站点根本没有实现我的想法。那你为什么称它为“沙盒”呢？很抱歉，那是旧版本，我现在推的是新版本。名称对代码重要吗？

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

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

<div class="parent">
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
</div>

<br>

<div class="parent">
    <div class="content">Content</div>
</div>

.parent {
    border: 1px solid;
    margin: 0px auto;
    height: 100px;
    width: 300px;
}

.sidebar {
    height: 100%;
    width: 100px;
    float: left;
    background: rgb(255, 176, 176); /* Light Red */
}

.content {
    height: 100%;
    background: rgb(148, 148, 255); /* Light Blue */

}