Responsive 2-column CSS layout including sidebar with fixed width?

Question

Cannot find a solution for this (what I'm guessing must be a pretty common problem) anywhere.

I am creating a responsive design with a sidebar, where the sidebar needs to have a fixed width of 200px and has unknown height. How can I make it so the main content area takes up all the remaining width, without anything misbehaving.

The closest I've come to it is the following, but the problem with it is that the sidebar can overlap the footer. Can anyone suggest a fix for my code, or share with me some code that works?

            * {
            padding: 0;
            margin: 0;
            outline: 0;
            -moz-box-sizing: content-box;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }
        body {
            background: orange;
        }
        #container {
            max-width: 1000px;
            min-width: 768px;
            margin: 0 auto;
            background: yellow;
            position: relative;
            height: 100%;
        }
        #header {
            background: purple;
            color: white;
            text-align: center;
            padding: 10px;
        }
        #main {
            position: relative;
        }
        aside {
            background: blue;
            width: 200px;
            color: white;

            position: absolute;
            top: 0;

            /* change this to "right: 0;" if you want the aside on the right. Also, change the "margin-left" code, below. */
            left: 0;

            padding-top: 20px;
            padding-bottom: 20px;

            padding-left: 10px; /* If you change this value, remember to change the margin-left value of #primary */
            padding-right: 10px; /* ditto */
        }
        #primary {
            background: red;

            /* change this to margin-right if you want the aside on the right. Also change the "left" code, above. */
            margin-left: 220px; /* aside_width + aside_left_padding + aside_right_padding = 200px + 10px + 10px */
            padding: 1em; /* whatever */
        }
        #footer {
            background: green;
            color: white;
            padding: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        <div id="container">
        <div id="header">
            <h1>LAYOUT TEST #2</h1>
        </div>
        <div id="main">
            <div id="primary">
                <h2>THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <h2>sub heading</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <h2>sub heading</h2>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </div>
            <aside>
                <h3>navigation (left)</h3>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </aside>
        </div>
        <div id="footer">
            <h1>LAYOUT TEST #2</h1>
        </div>
    </div>

Answer 1

1 = With flexbox: http://jsfiddle.net/rudiedirkx/CjWbv/2/

#main {
    display: flex;
}
#primary {
    background: #bbb;
    flex: 1;
}
aside {
    background: #ddd;
    flex: 0 0 200px;
}

2 = with calc(): http://jsfiddle.net/rudiedirkx/CjWbv/

#main:after { clearfix here }
#primary {
    float: left;
    background: #bbb;
    width: calc(100% - 200px);
}
aside {
    background: #ddd;
    float: right;
    width: 200px;
}

Both will require a fallback for older browsers (and vendor prefixing). Take your pick from the other answers.