How to make a div with a fixed width push another div with a relative width when resizing the browser window?

Question

I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.

When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?

Here's my testing website if you want to see what I'm talking about exactly: 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

I would use display: table and table-cell for that.

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