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

Question

我有一个带有 2 个浮动 div 的页面：一个用于页面内容，另一个用于小部件侧边栏。页面内容 max-width 设置为 70%，侧边栏宽度为 275px +padding 的固定值。当我缩小页面大小（使用浏览器窗口大小）时，一切看起来都是正确的，直到侧边栏占用超过 30% 的空间并位于左侧 div 下方。

在调整浏览器窗口大小时，是否可以让右侧 div 保持其 275 像素的宽度并使其挤压左侧 div，以便在必要时从 70% 的最大宽度降低到 5%？

如果你想知道我在说什么，这是我的测试网站：http://mywptestsite.is-great.org/page-height-and-sidebar/

#primary {
    float: left;
    clear: none;
    max-width: 70%;
    margin-right: 22px;
}

.sidebar .entry-header, 
.sidebar .entry-content, 
.sidebar .entry-summary, 
.sidebar .entry-meta {
    width: 100%;
    padding: 0 20px 0 50px;
}

.site-main #tertiary {
    float: right;
    clear: none;
    width: 256px;
    position: static;
    height: auto;
}

.site-main .widget-area {
    padding: 30px 20px 0 0;
    float: none;
    width: 100%;
}

Answer 1

我会使用 display: table 和 table-cell。

JSFiddle：http://jsfiddle.net/maximgladkov/M3wP8/

HTML

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

CSS

#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;
}