Javascript 调整浏览器窗口大小时，如何使一个固定宽度的div推送另一个相对宽度的div？

我有一个带有2个浮动div的页面：一个用于页面内容，另一个用于小部件边栏。页面内容最大宽度设置为70%，边栏宽度为275px+填充的固定值。当我调整页面大小（调整浏览器窗口大小）时，一切看起来都正常，直到侧边栏占据30%以上的空间并位于左侧div下

调整浏览器窗口大小时，是否可以让右div保持其275px的宽度，并挤压左div，使其从最大宽度70%降至5%（如有必要）

这是我的测试网站，如果你想知道我到底在说什么：

---

我会使用display:table和table-cell

JSFiddle：

HTML

<div id="container">
    <div id="content">
        Content
    </div>
    <div id="sidebar">
        Sidebar
    </div>
</div>

---

或者不同时浮动—将侧边栏放在DOM中主内容之前，将其浮动到左侧，并使主内容具有匹配的边距右侧，或者—如果更改DOM顺序不是一个选项，您可以采用此处讨论的技术：谢谢，使用“显示为表”是常见做法吗？它经常被使用，因为表提供了一些额外的特性，如果没有JavaScript代码，这些特性是不可重复的。尤其是在高度方面。

<div id="container">
    <div id="content">
        Content
    </div>
    <div id="sidebar">
        Sidebar
    </div>
</div>

#container {
    display: table;
    width: 70%;
    margin: 0 auto;
}

#content, #sidebar {
    display: table-cell;
}

#content {
    max-width: 70%;
    border: 1px solid blue;
}

#sidebar {
    width: 254px;
    border: 1px solid red;
}